js怎样实现文字跑马灯效果文字跑马灯效果的3种实现技巧-js教程-PHP中文网

js怎样实现文字跑马灯效果文字跑马灯效果的3种实现技巧

下次还敢

发布： 2025-06-24 16:03:02

原创

843人浏览过

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

js怎样实现文字跑马灯效果文字跑马灯效果的3种实现技巧

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

解决方案

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

基于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属性中的时长，可以控制滚动速度。

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

<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;

  setInterval(() => {
    scrollLeft++;
    container.scrollLeft = scrollLeft;
    if (scrollLeft >= textWidth) {
      scrollLeft = 0;
    }
  }, 20); // 每20毫秒更新一次
</script>

登录后复制

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

基于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种实现技巧的详细内容，更多请关注php中文网其它相关文章！