当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现文字跑马灯的3种方式

JS实现文字跑马灯的3种方式

2025-06-25 16:10:18 0浏览收藏

解决方案

实现文字跑马灯效果，JavaScript提供了多种途径。这里介绍三种常见且实用的技巧：

基于CSS动画的实现：这是最简洁的方式，完全依赖CSS3的animation属性。首先，将需要滚动的文字放在一个容器内，容器宽度固定，超出部分隐藏。然后，通过CSS动画改变文字容器的transform: translateX()属性，使其从右向左或从左向右移动。这种方式性能好，代码量少，但灵活性稍差，难以实现复杂的跑马灯效果。
```
  
    这是一段需要滚动的文字，很长很长很长...
  
```
这里，动画的关键在于@keyframes marquee，它定义了文字从容器右侧移动到左侧的动画过程。调整animation属性中的时长，可以控制滚动速度。
基于JavaScript定时器的实现：这种方式更灵活，可以精确控制文字的滚动速度和方向。使用setInterval()函数，每隔一段时间更新文字容器的scrollLeft属性。当scrollLeft达到文字总宽度时，将其重置为0，实现循环滚动。这种方式的缺点是需要手动计算文字宽度，且在某些浏览器下可能出现卡顿。
```
  
    这是一段需要滚动的文字，很长很长很长...
  
```
注意，需要确保marquee-text的offsetWidth属性能够正确获取到文字的实际宽度。

基于requestAnimationFrame的实现：requestAnimationFrame是浏览器提供的专门用于动画的API，相比setInterval，它更高效，更流畅，也更省电。它的原理是告诉浏览器，希望执行一个动画，让浏览器在下一次重绘之前调用指定的回调函数。


  
    这是一段需要滚动的文字，很长很长很长...

这种方式与setInterval类似，但使用requestAnimationFrame来驱动动画，性能更好。

如何让跑马灯在鼠标悬停时停止滚动？

这个需求很常见，用户可能希望在阅读跑马灯内容时暂停滚动。实现起来也很简单，只需要监听mouseover和mouseout事件，在mouseover事件中停止滚动，在mouseout事件中恢复滚动。

对于CSS动画实现，可以通过修改animation-play-state属性来暂停和恢复动画：

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

对于JavaScript定时器和requestAnimationFrame实现，则需要清除定时器或取消动画帧：

// 定时器实现
let intervalId;
container.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});
container.addEventListener('mouseout', () => {
  intervalId = setInterval(() => { /* ... */ }, 20);
});

// requestAnimationFrame实现
let animationFrameId;
function animate() { /* ... */ }
container.addEventListener('mouseover', () => {
  cancelAnimationFrame(animationFrameId);
});
container.addEventListener('mouseout', () => {
  animationFrameId = requestAnimationFrame(animate);
});

如何实现垂直方向的跑马灯效果？

跑马灯不一定只能水平滚动，垂直滚动也很有用。实现垂直跑马灯，只需要将水平滚动的逻辑改为垂直滚动即可。

对于CSS动画实现，将transform: translateX()改为transform: translateY()，并调整@keyframes中的起始和结束位置。

对于JavaScript实现，将scrollLeft改为scrollTop，并调整滚动方向和边界判断。

// 垂直滚动示例
const container = document.getElementById('marquee-container');
const text = document.getElementById('marquee-text');
const textHeight = text.offsetHeight;
let scrollTop = 0;

function animate() {
  scrollTop++;
  container.scrollTop = scrollTop;
  if (scrollTop >= textHeight) {
    scrollTop = 0;
  }
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

同时，需要调整容器的样式，使其能够垂直滚动：

#marquee-container {
  width: 200px; /* 固定容器宽度 */
  height: 100px; /* 固定容器高度 */
  overflow: hidden;
}

#marquee-text {
  /* ... */
  white-space: nowrap; /* 防止文字换行 */
}

跑马灯文字内容更新后，如何自动调整滚动速度？

如果跑马灯的文字内容是动态更新的，那么文字长度也会随之变化，滚动速度也需要相应调整。

对于CSS动画实现，可以通过JavaScript动态修改animation-duration属性：

const content = document.querySelector('.marquee-content');
const container = document.querySelector('.marquee-container');
const duration = content.offsetWidth / 100; // 根据文字宽度计算滚动时长，这里假设每100像素滚动1秒
content.style.animationDuration = `${duration}s`;

对于JavaScript实现，需要重新计算文字宽度，并根据文字宽度调整滚动速度。

function updateMarquee() {
  const textWidth = text.offsetWidth;
  // 根据文字宽度调整滚动速度，例如，文字越长，速度越快
  const speed = textWidth / 5000; // 每5000像素滚动1秒
  clearInterval(intervalId); // 清除之前的定时器
  intervalId = setInterval(() => {
    scrollLeft += speed;
    container.scrollLeft = scrollLeft;
    if (scrollLeft >= textWidth) {
      scrollLeft = 0;
    }
  }, 20);
}

// 在文字内容更新后调用updateMarquee函数

需要注意的是，滚动速度的计算方式可以根据实际需求进行调整，这里只是一个简单的示例。

理论要掌握，实操不能落！以上关于《JS实现文字跑马灯的3种方式》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

JavaScript CSS动画 requestAnimationFrame 文字跑马灯滚动速度