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

还在寻找酷炫的文字跑马灯效果？本文为你总结了3种JS实现文字跑马灯效果的实用技巧，并针对百度SEO进行了优化。首先，我们介绍基于CSS动画的实现方法，其优点是性能高、代码简洁，但灵活性稍逊。其次，详细讲解如何利用JavaScript定时器，通过setInterval()函数动态更新scrollLeft属性，实现灵活的循环滚动效果，但需注意可能出现的卡顿问题。最后，重点推荐基于requestAnimationFrame的实现方案，该API能驱动动画，使滚动效果更流畅，性能更优。此外，文章还提供了鼠标悬停暂停、垂直跑马灯实现以及动态内容更新后自动调整滚动速度的解决方案，助你轻松打造各种炫酷的文字跑马灯效果。

实现文字跑马灯效果有三种常见技巧：1.基于CSS动画的实现，通过@keyframes定义从右向左移动的动画过程，并使用animation属性控制滚动速度，优点是性能好、代码少，但灵活性较差；2.基于JavaScript定时器的实现，利用setInterval()函数更新scrollLeft属性，手动计算文字宽度以实现循环滚动，优点是更灵活，缺点是可能出现卡顿；3.基于requestAnimationFrame的实现，与定时器类似但性能更优，通过该API驱动动画使滚动更流畅。此外，可通过监听mouseover和mouseout事件在鼠标悬停时暂停滚动，CSS方案修改animation-play-state属性，JavaScript方案则清除定时器或取消动画帧；垂直跑马灯只需将水平逻辑改为垂直方向，如translateY()或scrollTop属性；动态更新内容后，可重新计算文字宽度并调整animation-duration或滚动速度参数以自动适应新内容。

文字跑马灯，简单来说就是让文字像电影字幕一样，在页面上滚动显示。实现方式多种多样，但核心都是通过控制文字的位置，使其产生动态效果。

解决方案

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

1. 基于CSS动画的实现：这是最简洁的方式，完全依赖CSS3的animation属性。首先，将需要滚动的文字放在一个容器内，容器宽度固定，超出部分隐藏。然后，通过CSS动画改变文字容器的transform: translateX()属性，使其从右向左或从左向右移动。这种方式性能好，代码量少，但灵活性稍差，难以实现复杂的跑马灯效果。

   <div class="marquee-container">
     <div class="marquee-content">
       这是一段需要滚动的文字，很长很长很长...
     </div>
   </div>
   
   <style>
     .marquee-container {
       width: 300px; /* 固定容器宽度 */
       overflow: hidden; /* 隐藏超出部分 */
       position: relative;
     }
   
     .marquee-content {
       position: absolute;
       width: auto;
       animation: marquee 10s linear infinite; /* 动画名称、时长、速度曲线、循环次数 */
     }
   
     @keyframes marquee {
       0% { transform: translateX(100%); } /* 初始位置，在容器右侧 */
       100% { transform: translateX(-100%); } /* 结束位置，在容器左侧 */
     }
   </style>

   这里，动画的关键在于@keyframes marquee，它定义了文字从容器右侧移动到左侧的动画过程。调整animation属性中的时长，可以控制滚动速度。

   

2. 基于JavaScript定时器的实现：这种方式更灵活，可以精确控制文字的滚动速度和方向。使用setInterval()函数，每隔一段时间更新文字容器的scrollLeft属性。当scrollLeft达到文字总宽度时，将其重置为0，实现循环滚动。这种方式的缺点是需要手动计算文字宽度，且在某些浏览器下可能出现卡顿。

   <div id="marquee-container"   style="max-width:100%">
     <div id="marquee-text">
       这是一段需要滚动的文字，很长很长很长...
     </div>
   </div>
   
   <script>
     const container = document.getElementById('marquee-container');
     const text = document.getElementById('marquee-text');
     const textWidth = text.offsetWidth; // 获取文字宽度
     let scrollLeft = 0;
   
     setInterval(() => {
       scrollLeft++;
       container.scrollLeft = scrollLeft;
       if (scrollLeft >= textWidth) {
         scrollLeft = 0;
       }
     }, 20); // 每20毫秒更新一次
   </script>

   注意，需要确保marquee-text的offsetWidth属性能够正确获取到文字的实际宽度。

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

   <div id="marquee-container" style="width: 300px; overflow: hidden;">
     <div id="marquee-text">
       这是一段需要滚动的文字，很长很长很长...
     </div>
   </div>
   
   <script>
     const container = document.getElementById('marquee-container');
     const text = document.getElementById('marquee-text');
     const textWidth = text.offsetWidth;
     let scrollLeft = 0;
   
     function animate() {
       scrollLeft++;
       container.scrollLeft = scrollLeft;
       if (scrollLeft >= textWidth) {
         scrollLeft = 0;
       }
       requestAnimationFrame(animate);
     }
   
     requestAnimationFrame(animate);
   </script>

   这种方式与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学习网公众号吧！