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

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

2025-06-24 10:46:11 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天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 属性，使文字滚动起来。

<div id="marquee-container"   style="max-width:100%">
  <span id="marquee-text">这是一段需要滚动的文字，长度超过容器宽度才能看到效果。</span>
</div>

<script>
  const marqueeContainer = document.getElementById('marquee-container');
  const marqueeText = document.getElementById('marquee-text');
  let marginLeft = 200;

  function marquee() {
    marginLeft--;
    if (marginLeft < -marqueeText.offsetWidth) {
      marginLeft = 200; // 从右侧重新开始
    }
    marqueeText.style.marginLeft = marginLeft + 'px';
  }

  setInterval(marquee, 20);
</script>

这段代码的关键在于：

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

方案二：CSS animation 动画

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

<div id="marquee-container" style="width: 200px; overflow: hidden;">
  <span id="marquee-text" style="display: inline-block; padding-left: 100%; animation: marquee 10s linear infinite;">
    这是一段需要滚动的文字，长度超过容器宽度才能看到效果。
  </span>
</div>

<style>
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
</style>

这段代码的关键在于：

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

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

方案三：Canvas 绘图

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

<canvas id="marquee-canvas" width="200" height="30"></canvas>

<script>
  const canvas = document.getElementById('marquee-canvas');
  const ctx = canvas.getContext('2d');
  const text = '这是一段需要滚动的文字，长度超过容器宽度才能看到效果。';
  let x = 200;

  function marquee() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ctx.font = '16px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(text, x, 20);
    x--;
    if (x < -ctx.measureText(text).width) {
      x = 200;
    }
    requestAnimationFrame(marquee); // 使用 requestAnimationFrame 优化性能
  }

  marquee();
</script>

这段代码的关键在于：

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 定时器）修改：

<div id="marquee-container" style="width: 200px; overflow: hidden; white-space: nowrap;">
  <span id="marquee-text">这是一段需要滚动的文字，长度超过容器宽度才能看到效果。</span>
</div>

<script>
  const marqueeContainer = document.getElementById('marquee-container');
  const marqueeText = document.getElementById('marquee-text');
  let marginLeft = -marqueeText.offsetWidth; // 从左侧开始

  function marquee() {
    marginLeft++;
    if (marginLeft > marqueeContainer.offsetWidth) {
      marginLeft = -marqueeText.offsetWidth; // 从左侧重新开始
    }
    marqueeText.style.marginLeft = marginLeft + 'px';
  }

  setInterval(marquee, 20);
</script>

关键修改点：

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

方案三（Canvas 绘图）修改：

<canvas id="marquee-canvas" width="200" height="30"></canvas>

<script>
  const canvas = document.getElementById('marquee-canvas');
  const ctx = canvas.getContext('2d');
  const text = '这是一段需要滚动的文字，长度超过容器宽度才能看到效果。';
  let x = -ctx.measureText(text).width; // 从左侧开始

  function marquee() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ctx.font = '16px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(text, x, 20);
    x++;
    if (x > canvas.width) {
      x = -ctx.measureText(text).width; // 从左侧重新开始
    }
    requestAnimationFrame(marquee); // 使用 requestAnimationFrame 优化性能
  }

  marquee();
</script>

关键修改点：

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

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

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

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

<div id="marquee-container" style="width: 200px; overflow: hidden; white-space: nowrap;">
  <span id="marquee-text">这是一段需要滚动的文字，长度超过容器宽度才能看到效果。</span>
</div>

<script>
  const marqueeContainer = document.getElementById('marquee-container');
  const marqueeText = document.getElementById('marquee-text');
  let marginLeft = 200;
  const stopPosition = 50; // 指定停止的位置
  let intervalId;

  function marquee() {
    marginLeft--;
    if (marginLeft < -marqueeText.offsetWidth) {
      marginLeft = 200;
    }

    if (marginLeft <= stopPosition) {
      clearInterval(intervalId); // 停止定时器
      marqueeText.style.marginLeft = stopPosition + 'px'; // 最终位置
      return;
    }

    marqueeText.style.marginLeft = marginLeft + 'px';
  }

  intervalId = setInterval(marquee, 20);
</script>

关键修改点：

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

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

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

<div id="marquee-container" style="width: 200px; overflow: hidden;">
  <span id="marquee-text" style="display: inline-block; padding-left: 100%;" class="marquee">
    这是一段需要滚动的文字，长度超过容器宽度才能看到效果。
  </span>
</div>

<style>
  .marquee {
    animation: marquee 10s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
</style>

<script>
  const marqueeText = document.getElementById('marquee-text');
  const stopPosition = 50; // 指定停止的位置

  // 假设在某个事件触发时停止动画
  setTimeout(() => {
    marqueeText.classList.remove('marquee'); // 移除动画class
    marqueeText.style.transform = `translateX(${stopPosition}px)`; // 设置最终位置
  }, 5000); // 假设5秒后停止
</script>

关键修改点：

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

方案三（Canvas 绘图）修改：

<canvas id="marquee-canvas" width="200" height="30"></canvas>

<script>
  const canvas = document.getElementById('marquee-canvas');
  const ctx = canvas.getContext('2d');
  const text = '这是一段需要滚动的文字，长度超过容器宽度才能看到效果。';
  let x = 200;
  const stopPosition = 50; // 指定停止的位置
  let animationFrameId;

  function marquee() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = '16px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(text, x, 20);

    if (x <= stopPosition) {
      cancelAnimationFrame(animationFrameId); // 停止动画帧
      x = stopPosition; // 最终位置
      ctx.fillText(text, x, 20); // 确保最终位置显示文字
      return;
    }

    x--;
    animationFrameId = requestAnimationFrame(marquee);
  }

  marquee();
</script>

关键修改点：