js实现marquee

在JavaScript中实现类似<marquee>标签的滚动效果可以通过多种方式完成。以下是几种常见方法：

使用CSS动画结合JavaScript控制

通过CSS的@keyframes和transform属性实现平滑滚动，JavaScript用于动态控制内容或启停。

<style>
  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-content {
    display: inline-block;
    animation: scroll 10s linear infinite;
  }
  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>

<div class="marquee-container">
  <div class="marquee-content" id="marqueeText">这里是滚动内容</div>
</div>

<script>
  // 动态更新内容
  document.getElementById('marqueeText').textContent = '新内容可以动态设置';
</script>

纯JavaScript实现

通过定时修改元素的style.left或style.marginLeft属性实现逐帧滚动。

<div id="marquee" style="width: 100%; overflow: hidden;">
  <div id="marqueeText" style="display: inline-block;">需要滚动的内容</div>
</div>

<script>
  const marqueeText = document.getElementById('marqueeText');
  const containerWidth = document.getElementById('marquee').offsetWidth;
  let position = containerWidth;

  function scrollMarquee() {
    if (position < -marqueeText.offsetWidth) {
      position = containerWidth;
    }
    position -= 1;
    marqueeText.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(scrollMarquee);
  }

  scrollMarquee();
</script>

使用requestAnimationFrame优化性能

相比setInterval，requestAnimationFrame能提供更流畅的动画效果。

function startMarquee(element, speed = 1) {
  const textWidth = element.scrollWidth;
  let xPos = 0;

  function animate() {
    xPos -= speed;
    if (xPos < -textWidth) xPos = 0;
    element.style.transform = `translateX(${xPos}px)`;
    requestAnimationFrame(animate);
  }

  animate();
}

// 调用示例
startMarquee(document.getElementById('marqueeElement'));

反向滚动（从右到左）

修改CSS或JavaScript逻辑即可实现不同方向的滚动效果。

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

暂停与恢复功能

通过JavaScript控制CSS动画的animation-play-state属性。

const marquee = document.querySelector('.marquee-content');

// 暂停
marquee.style.animationPlayState = 'paused';

// 恢复
marquee.style.animationPlayState = 'running';

注意事项

• 性能优化：对于长内容或高频更新，建议使用CSS动画而非JavaScript直接操作DOM。
• 响应式设计：通过监听resize事件动态调整容器宽度。
• 无障碍性：确保滚动内容可通过键盘操作暂停，或提供静态文本替代方案。

以上方法可根据实际需求选择或组合使用，CSS动画方案通常更适合现代浏览器，而纯JavaScript方案兼容性更广。