首页 > 文章 > 前端

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

时间：2025-06-24 10:46:11 451浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS实现文字跑马灯的3种方法！》，聊聊，希望可以帮助到正在努力赚钱的你。

JS实现跑马灯效果主要有三种方案：1.基于CSS overflow:hidden和JS定时器，2.使用CSS animation动画，3.利用Canvas绘图。第一种方案通过overflow:hidden隐藏超出容器文字，并用JS定时器不断改变marginLeft实现滚动；第二种方案使用CSS animation定义关键帧动画，代码简洁性能好但灵活性较差；第三种方案使用Canvas绘制文字并动态更新位置，灵活性高但实现复杂。性能优化技巧包括减少DOM操作、使用requestAnimationFrame替代setInterval、节流控制频率、使用transform代替left/top属性、避免复杂CSS样式。要实现文字从左向右循环滚动，需修改marginLeft或x的初始值为负文字宽度，并调整判断条件使文字完全移出右侧后重新从左侧开始。要让跑马灯滚动到指定位置停止，可在JS方案中清除定时器，在CSS方案中动态移除动画class，在Canvas方案中取消动画帧请求，并设置最终位置确保文字停在目标点。选择方案应根据需求权衡实现难度与性能表现。

js如何实现文字跑马灯效果跑马灯动画的3种实现方案！

跑马灯效果，简单来说，就是让文字像走马灯一样滚动起来。JS实现跑马灯效果，核心在于利用定时器不断改变文字的位置，造成动态滚动的视觉效果。

解决方案

实现跑马灯效果，主要有三种方案：

基于CSS overflow: hidden 和 JS 定时器： 这是最常见的方案，也是比较容易理解的一种。
使用 CSS animation 动画： 这种方案性能更好，代码更简洁，但需要一定的CSS基础。
利用 Canvas 绘图： 这种方案最灵活，可以实现各种复杂的跑马灯效果，但实现起来也最复杂。

下面分别介绍这三种方案：

方案一：CSS overflow: hidden + JS 定时器

这种方案的原理是，将需要滚动的文字放在一个容器中，容器设置 overflow: hidden，然后使用 JS 定时器不断改变文字容器的 marginLeft 或 marginRight 属性，使文字滚动起来。


  这是一段需要滚动的文字，长度超过容器宽度才能看到效果。

这段代码的关键在于：

overflow: hidden：隐藏超出容器宽度的文字。
white-space: nowrap：防止文字换行，保证文字在同一行滚动。
marginLeft：控制文字的水平位置。
setInterval：定时调用 marquee 函数，不断改变 marginLeft 的值。

方案二：CSS animation 动画

这种方案使用 CSS animation 来实现跑马灯效果，代码更简洁，性能更好。


  
    这是一段需要滚动的文字，长度超过容器宽度才能看到效果。

这段代码的关键在于：

animation: marquee 10s linear infinite：定义了一个名为 marquee 的动画，持续时间为 10 秒，线性运动，无限循环。
@keyframes marquee：定义了动画的关键帧，从 translateX(0%) 到 translateX(-100%)，使文字从右向左滚动。
padding-left: 100%：让文字一开始出现在容器的右侧。

这种方案的优点是性能好，代码简洁，缺点是灵活性稍差，不容易实现复杂的跑马灯效果。

方案三：Canvas 绘图

这种方案使用 Canvas 绘图来实现跑马灯效果，最灵活，可以实现各种复杂的跑马灯效果，例如文字渐变、文字旋转、文字颜色变化等。

这段代码的关键在于：

canvas.getContext('2d')：获取 Canvas 的 2D 绘图上下文。
ctx.fillText(text, x, 20)：在 Canvas 上绘制文字，x 表示文字的水平位置，20 表示文字的垂直位置。
ctx.measureText(text).width：获取文字的宽度。
requestAnimationFrame(marquee)：使用 requestAnimationFrame 来定时调用 marquee 函数，可以获得更好的性能。

这种方案的优点是灵活性高，可以实现各种复杂的跑马灯效果，缺点是实现起来比较复杂，需要一定的 Canvas 基础。

JS跑马灯性能优化有哪些技巧？

性能优化对于跑马灯效果至关重要，尤其是在处理大量文本或高频率滚动时。

减少DOM操作： 避免在循环中频繁修改DOM。可以将需要更新的内容先在内存中处理好，然后一次性更新到DOM上。例如，在方案一中，可以先计算好新的marginLeft值，然后再设置marqueeText.style.marginLeft。
使用requestAnimationFrame： requestAnimationFrame 比 setInterval 或 setTimeout 更适合动画，因为它会在浏览器重绘之前执行，避免不必要的重绘和卡顿。方案三中已经使用了requestAnimationFrame。
节流（Throttling）： 如果跑马灯的更新频率过高，可以考虑使用节流技术，限制一段时间内只执行一次更新。这可以减少CPU的负担，提高性能。
CSS动画优化： 如果使用CSS动画，尽量使用transform属性进行位移，而不是left或top。transform通常比改变布局属性性能更好。
离屏渲染（Offscreen Rendering）： 对于复杂的跑马灯效果，可以先在离屏Canvas中渲染，然后再将离屏Canvas的内容绘制到屏幕上。这可以避免在每次更新时都重新渲染整个画面。
文字预渲染： 如果跑马灯的文字内容是固定的，可以预先将文字渲染成图片，然后滚动图片，而不是每次都重新渲染文字。
避免使用复杂的CSS样式： 复杂的CSS样式会增加浏览器的渲染负担，尽量使用简单的CSS样式来实现跑马灯效果。

如何实现文字从左向右，循环滚动的跑马灯效果？

要实现文字从左向右循环滚动，只需修改一下方案一和方案三中的逻辑即可。

方案一（CSS overflow: hidden + JS 定时器）修改：


  这是一段需要滚动的文字，长度超过容器宽度才能看到效果。

关键修改点：

marginLeft 初始值设置为 -marqueeText.offsetWidth，让文字从左侧开始。
判断条件改为 marginLeft > marqueeContainer.offsetWidth，当文字完全移出容器右侧时，重新从左侧开始。

方案三（Canvas 绘图）修改：

关键修改点：

x 初始值设置为 -ctx.measureText(text).width，让文字从左侧开始。
判断条件改为 x > canvas.width，当文字完全移出画布右侧时，重新从左侧开始。

如何让跑马灯文字滚动到指定位置后停止？

让跑马灯文字滚动到指定位置后停止，需要在代码中添加一个判断条件，当文字滚动到指定位置时，停止定时器或动画。

方案一（CSS overflow: hidden + JS 定时器）修改：


  这是一段需要滚动的文字，长度超过容器宽度才能看到效果。

关键修改点：

添加 stopPosition 变量，指定停止的位置。
添加 intervalId 变量，保存定时器的 ID，方便停止定时器。
在 marquee 函数中，判断 marginLeft 是否小于等于 stopPosition，如果是，则停止定时器，并设置文字的最终位置。

方案二（CSS animation 动画）修改：

CSS动画要停止，稍微麻烦一点，需要动态的添加和移除动画class。


  
    这是一段需要滚动的文字，长度超过容器宽度才能看到效果。

关键修改点：

给 marquee-text 添加一个 class marquee，该 class 定义了动画。
使用 setTimeout 模拟某个事件触发，然后移除 marquee class，停止动画。
设置 marqueeText.style.transform，让文字停留在指定位置。

方案三（Canvas 绘图）修改：

关键修改点：

添加 stopPosition 变量，指定停止的位置。
添加 animationFrameId 变量，保存 requestAnimationFrame 的 ID，方便停止动画帧。
在 marquee 函数中，判断 x 是否小于等于 stopPosition，如果是，则停止动画帧，并设置文字的最终位置。

选择哪种方案取决于具体的需求。如果需要简单的跑马灯效果，可以使用 CSS animation；如果需要复杂的跑马灯效果，可以使用 Canvas 绘图。在性能方面，CSS animation 通常比 JS 定时器性能更好，而 Canvas 绘图的性能则取决于具体的实现方式。

文中关于跑马灯的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS实现文字跑马灯的3种方式！》文章吧，也可关注golang学习网公众号了解相关技术文章。

跑马灯