当前位置：首页 > JavaScript

js实现跑马灯效果

2026-04-05 00:48:58JavaScript

实现跑马灯效果的JavaScript方法

使用CSS动画结合JavaScript控制

通过CSS定义动画关键帧，JavaScript动态调整内容宽度和动画时长。以下是示例代码：

<div class="marquee-container">
  <div class="marquee-content">这里是需要滚动的文本内容...</div>
</div>

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

纯JavaScript实现

通过定时器不断修改元素位置实现滚动：

function startMarquee(element, speed = 50) {
  const container = document.querySelector(element);
  const content = container.firstElementChild;
  const containerWidth = container.offsetWidth;
  const contentWidth = content.offsetWidth;

  let position = containerWidth;

  function animate() {
    position -= 1;
    if (position < -contentWidth) {
      position = containerWidth;
    }
    content.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
  }

  animate();
}

响应式处理

添加窗口大小变化时的自适应处理：

window.addEventListener('resize', () => {
  // 重新计算容器和内容宽度
  // 重置动画位置
});

暂停和继续功能

通过控制CSS动画的播放状态实现交互：

const marquee = document.querySelector('.marquee-content');
marquee.style.animationPlayState = 'paused'; // 暂停
marquee.style.animationPlayState = 'running'; // 继续

注意事项

js实现跑马灯效果