论坛增加支持手机、平板、电脑(1080P、4K)公告统一滚动速度信息

功能

  • 支持手机、平板、电脑(1080P、4K)相似的滚动速度
  • 背景透明
  • 鼠标或触摸单击悬停
  • 超链接悬停鼠标变手图标,鼠标或触摸单击可跳转

discourse配置

管理员->自定义->主题->自定义CSS/HTML->通用 配置CSS和页眉

CSS

#scrolling-announcement {
  background-color: transparent; /* 透明背景 */
  color: gray;
  padding: 2px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.scroll-content {
  display: inline-block; /* 使内容成为行内块 */
  white-space: nowrap; /* 防止内容换行 */
  animation: scroll-left linear infinite;
}

.scroll-content a {
  color: #3498db;
  text-decoration: none; /* 移除链接下划线 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
}

.scroll-content:hover {
  animation-play-state: paused; /* 鼠标悬停时停止动画 */
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%); /* 使用transform提高性能 */
  }
  100% {
    transform: translateX(-100%);
  }
}

页眉

<script>
  function adjustScrollSpeed() {
    const scrollContent = document.querySelector('.scroll-content');
    const containerWidth = document.documentElement.clientWidth;
    const contentWidth = scrollContent.offsetWidth; // 内容宽度
    const width = containerWidth + contentWidth;
    const scrollSpeed = 10; // 速度,单位为px/s
    
    // 计算滚动时间,速度单位为px/s
    const scrollTime = width / scrollSpeed;
    
    // 更新CSS动画持续时间
    scrollContent.style.animationDuration = `${scrollTime}s`;
  }

  // 初始调整和窗口大小变化时调整
  adjustScrollSpeed();
  window.addEventListener('resize', adjustScrollSpeed);
</script>

<div id="scrolling-announcement">
    <div class="scroll-content">公告:最炫的龙转表盘,华米手表丝滑展现,点击<a href="https://www.zeppos.tech/t/topic/2455?u=sober" target="_blank">安装表盘体验</a>,点击<a href="https://www.zeppos.tech/t/topic/2466?u=sober" target="_blank">获取华米手表(Amazfit)员工内购优惠码</a></div>
</div>

效果