当前位置：首页 > JavaScript

scrolltext js实现

2026-04-05 20:20:28JavaScript

实现滚动文本的JavaScript方法

使用JavaScript实现滚动文本效果可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画结合JavaScript

通过CSS的animation属性实现滚动效果，JavaScript用于动态控制内容。

<style>
  .scroll-container {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-text {
    display: inline-block;
    animation: scroll 10s linear infinite;
  }
  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>

<div class="scroll-container">
  <div class="scroll-text">这里是需要滚动的文本内容</div>
</div>

使用JavaScript定时器

通过setInterval动态修改元素的marginLeft或transform属性实现滚动。

const textElement = document.getElementById('scrollText');
const containerWidth = 300;
let position = containerWidth;

function scrollText() {
  position--;
  textElement.style.transform = `translateX(${position}px)`;

  if (position < -textElement.offsetWidth) {
    position = containerWidth;
  }
}

setInterval(scrollText, 20);

使用requestAnimationFrame

这种方法性能更好，适合需要平滑滚动的场景。

const textElement = document.getElementById('scrollText');
const container = document.getElementById('scrollContainer');
let position = container.offsetWidth;
let animationId;

function animate() {
  position -= 2;
  textElement.style.transform = `translateX(${position}px)`;

  if (position < -textElement.offsetWidth) {
    position = container.offsetWidth;
  }

  animationId = requestAnimationFrame(animate);
}

// 启动动画
animate();

// 停止动画
// cancelAnimationFrame(animationId);

使用Marquee标签的替代方案

虽然HTML有原生的<marquee>标签，但已不推荐使用，可以用以下方式替代：

scrolltext js实现

function createMarquee(text, speed = 1) {
  const marquee = document.createElement('div');
  marquee.style.overflow = 'hidden';
  marquee.style.whiteSpace = 'nowrap';

  const content = document.createElement('div');
  content.textContent = text;
  content.style.display = 'inline-block';
  content.style.paddingLeft = '100%';
  content.style.animation = `scroll ${10/speed}s linear infinite`;

  marquee.appendChild(content);
  return marquee;
}

document.body.appendChild(createMarquee('滚动文本内容', 2));