js实现跑马灯

2026-02-28 20:43:05JavaScript

实现跑马灯效果的方法

使用CSS动画和HTML

通过CSS的@keyframes和transform属性实现水平滚动的跑马灯效果。

<div class="marquee">
  <p>这是一段需要滚动的文字内容，可以根据实际需求调整。</p>
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

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

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

使用JavaScript动态控制

通过JavaScript动态修改元素的left或margin-left属性实现滚动效果。

js实现跑马灯

<div class="marquee-js">
  <p>这是一段需要滚动的文字内容，可以根据实际需求调整。</p>
</div>

const marquee = document.querySelector('.marquee-js p');
let position = 0;

function animate() {
  position--;
  marquee.style.transform = `translateX(${position}px)`;

  if (position < -marquee.offsetWidth) {
    position = window.innerWidth;
  }

  requestAnimationFrame(animate);
}

animate();

使用marquee标签（不推荐）

HTML原生提供了<marquee>标签，但已过时，不建议在生产环境中使用。

js实现跑马灯

<marquee behavior="scroll" direction="left">
  这是一段需要滚动的文字内容，可以根据实际需求调整。
</marquee>

实现垂直滚动的跑马灯

通过修改CSS的transform属性实现垂直方向的滚动效果。

@keyframes marquee-vertical {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

控制动画暂停与继续

通过JavaScript控制CSS动画的播放状态。

const marquee = document.querySelector('.marquee p');

marquee.addEventListener('mouseenter', () => {
  marquee.style.animationPlayState = 'paused';
});

marquee.addEventListener('mouseleave', () => {
  marquee.style.animationPlayState = 'running';
});

以上方法提供了多种实现跑马灯效果的方案，可根据实际需求选择适合的方式。CSS动画方案性能较好，适合简单场景；JavaScript方案更灵活，适合复杂交互需求。