当前位置：首页 > JavaScript

js 实现 marquee

2026-03-14 01:01:21JavaScript

在 JavaScript 中实现 Marquee（滚动字幕）效果可以通过多种方式完成，以下是一些常见的方法：

使用 CSS 和 JavaScript 结合

通过 CSS 动画和 JavaScript 控制可以实现平滑的滚动效果：

const marquee = document.querySelector('.marquee');
const content = marquee.innerHTML;
marquee.innerHTML = content + content; // 复制内容以实现无缝滚动

marquee.style.animation = 'scroll 10s linear infinite';

// CSS 部分（需添加到样式表中）
/*
.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
*/

纯 JavaScript 实现

通过定时器动态修改元素的 scrollLeft 或 transform 属性：

js 实现 marquee

const marquee = document.getElementById('marquee');
let position = 0;

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

  if (position <= -marquee.scrollWidth / 2) {
    position = 0;
  }
  requestAnimationFrame(scrollMarquee);
}

scrollMarquee();

使用 HTML Marquee 标签（不推荐）

虽然 HTML 原生支持 <marquee> 标签，但已过时且不推荐使用：

<marquee behavior="scroll" direction="left">滚动的内容</marquee>

响应式 Marquee

针对不同屏幕尺寸调整滚动速度：

js 实现 marquee

const marquee = document.querySelector('.marquee');
let speed = 1;

function adjustSpeed() {
  speed = window.innerWidth < 768 ? 0.5 : 1;
}

window.addEventListener('resize', adjustSpeed);
adjustSpeed();

function animate() {
  marquee.style.transform = `translateX(${-speed * (Date.now() / 100)}px)`;
  requestAnimationFrame(animate);
}

animate();

带暂停功能的 Marquee

添加鼠标悬停暂停功能：

const marquee = document.querySelector('.marquee');
let isPaused = false;
let position = 0;

marquee.addEventListener('mouseenter', () => isPaused = true);
marquee.addEventListener('mouseleave', () => isPaused = false);

function scroll() {
  if (!isPaused) {
    position -= 1;
    marquee.style.transform = `translateX(${position}px)`;

    if (position <= -marquee.scrollWidth / 2) {
      position = 0;
    }
  }
  requestAnimationFrame(scroll);
}

scroll();

垂直滚动的 Marquee

修改方向即可实现垂直滚动：

const marquee = document.querySelector('.marquee');
let position = 0;

function scrollVertical() {
  position--;
  marquee.style.transform = `translateY(${position}px)`;

  if (position <= -marquee.scrollHeight) {
    position = 0;
  }
  requestAnimationFrame(scrollVertical);
}

scrollVertical();

以上方法可以根据具体需求选择使用，CSS 动画方案性能较好，而纯 JavaScript 方案则提供更多控制灵活性。