js实现文字滚动

实现文字水平滚动效果

使用CSS动画结合JavaScript控制文字水平滚动，适用于跑马灯或公告栏效果。

<div id="scrollText" style="white-space: nowrap; overflow: hidden; width: 300px;">
  这是一段需要滚动的文字内容，可以替换为任意需要展示的信息
</div>

const scrollElement = document.getElementById('scrollText');
const textWidth = scrollElement.scrollWidth;
const containerWidth = scrollElement.clientWidth;

scrollElement.style.animation = `scroll ${textWidth/50}s linear infinite`;

const style = document.createElement('style');
style.innerHTML = `
  @keyframes scroll {
    0% { transform: translateX(${containerWidth}px); }
    100% { transform: translateX(-${textWidth}px); }
  }
`;
document.head.appendChild(style);

实现垂直滚动列表效果

适用于新闻列表或公告的垂直滚动展示，通过定时改变位置实现。

<ul id="verticalScroll" style="height: 100px; overflow: hidden;">
  <li>第一条消息</li>
  <li>第二条消息</li>
  <li>第三条消息</li>
  <li>第四条消息</li>
</ul>

const list = document.getElementById('verticalScroll');
const items = list.querySelectorAll('li');
let currentIndex = 0;

function scrollVertically() {
  currentIndex = (currentIndex + 1) % items.length;
  list.style.transition = 'transform 0.5s ease';
  list.style.transform = `translateY(-${currentIndex * 100}px)`;

  // 循环时重置动画
  if(currentIndex === items.length - 1) {
    setTimeout(() => {
      list.style.transition = 'none';
      list.style.transform = 'translateY(0)';
      setTimeout(() => {
        list.style.transition = 'transform 0.5s ease';
      }, 50);
    }, 500);
  }
}

setInterval(scrollVertically, 2000);

使用Marquee标签的现代替代方案

虽然HTML原生有标签，但已不推荐使用。以下是用现代技术实现的替代方案：

<div class="marquee">
  <div class="marquee-content">
    <span>滚动内容第一部分</span>
    <span>滚动内容第二部分</span>
    <span>滚动内容第三部分</span>
  </div>
  <!-- 复制内容实现无缝循环 -->
  <div class="marquee-content" aria-hidden="true">
    <span>滚动内容第一部分</span>
    <span>滚动内容第二部分</span>
    <span>滚动内容第三部分</span>
  </div>
</div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

响应式文字滚动解决方案

根据容器宽度自动调整滚动速度和效果，适用于不同屏幕尺寸。

function responsiveTextScroll(elementId) {
  const element = document.getElementById(elementId);
  const containerWidth = element.offsetWidth;
  const textWidth = element.scrollWidth;

  if(textWidth > containerWidth) {
    const duration = textWidth / 50; // 控制速度
    element.style.animation = `scroll ${duration}s linear infinite`;

    const style = document.createElement('style');
    style.innerHTML = `
      @keyframes scroll {
        0% { transform: translateX(${containerWidth}px); }
        100% { transform: translateX(-${textWidth}px); }
      }
    `;
    document.head.appendChild(style);
  } else {
    element.style.animation = 'none';
  }
}

// 窗口大小改变时重新计算
window.addEventListener('resize', () => {
  responsiveTextScroll('scrollContainer');
});

// 初始化执行
responsiveTextScroll('scrollContainer');

以上方案可根据实际需求选择使用，通过调整CSS动画参数可以控制滚动速度和方向。对于复杂场景，可以考虑使用专门的滚动库如iScroll或Slick等。