当前位置：首页 > JavaScript

js 实现 marquee

2026-04-05 19:10:52JavaScript

使用 CSS 实现 Marquee 效果

CSS 提供了 marquee 相关的动画属性，可以通过 animation 和 @keyframes 实现文字或元素的滚动效果。

<div class="marquee">
  <span>这里是滚动的文字内容</span>
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee span {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

使用 JavaScript 实现 Marquee

通过 JavaScript 动态计算位置，实现更灵活的滚动效果。

js 实现 marquee

<div class="marquee-js">
  <span>这里是滚动的文字内容</span>
</div>

const marquee = document.querySelector('.marquee-js span');
const container = document.querySelector('.marquee-js');
let position = container.offsetWidth;

function animate() {
  position--;
  if (position < -marquee.offsetWidth) {
    position = container.offsetWidth;
  }
  marquee.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

使用 `<marquee>` HTML 标签（已废弃）

尽管 <marquee> 标签在现代浏览器中仍可用，但已不再推荐使用，因其不符合标准且性能较差。

js 实现 marquee

<marquee behavior="scroll" direction="left">这里是滚动的文字内容</marquee>

优化 JavaScript 实现

通过优化计算逻辑，减少不必要的重绘，提升性能。

const marquee = document.querySelector('.marquee-js span');
const container = document.querySelector('.marquee-js');
let position = 0;
const speed = 1;

function animate() {
  position -= speed;
  if (position < -marquee.offsetWidth) {
    position = container.offsetWidth;
  }
  marquee.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

实现双向滚动

支持从左到右或从右到左的滚动方向。

const marquee = document.querySelector('.marquee-js span');
const container = document.querySelector('.marquee-js');
let position = container.offsetWidth;
const direction = -1; // 1 向右，-1 向左

function animate() {
  position += direction;
  if (direction === 1 && position > container.offsetWidth) {
    position = -marquee.offsetWidth;
  } else if (direction === -1 && position < -marquee.offsetWidth) {
    position = container.offsetWidth;
  }
  marquee.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

以上方法提供了不同的实现方式，可根据需求选择 CSS 动画或 JavaScript 动态计算方案。