当前位置：首页 > JavaScript

js实现marquee

2026-01-31 22:39:47JavaScript

使用HTML原生marquee标签

HTML自带<marquee>标签可实现简单的滚动效果，但已过时（不推荐生产环境使用）：

js实现marquee

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

behavior: 可选scroll（循环滚动）、slide（滑动停止）、alternate（往返滚动）
direction: 控制方向（left, right, up, down）

使用CSS动画实现

通过CSS @keyframes和transform实现更现代的滚动效果：

js实现marquee

<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%); }
}

调整animation-duration（如10s）控制速度
支持双向滚动：修改transform值为translateY可实现垂直滚动

使用JavaScript动态控制

通过定时器动态修改元素位置实现灵活控制：

<div id="js-marquee" style="overflow: hidden;">
  <span id="marquee-text">需要滚动的文本内容</span>
</div>

const marquee = document.getElementById('js-marquee');
const text = document.getElementById('marquee-text');
let position = marquee.offsetWidth;

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

使用requestAnimationFrame优化性能
可通过position增减实现不同方向滚动

第三方库（如jQuery）

使用jQuery简化实现：

$('.marquee').each(function() {
  const $this = $(this);
  $this.css('overflow', 'hidden');
  const text = $this.find('span');
  let position = $this.width();

  setInterval(() => {
    position--;
    if (position < -text.width()) {
      position = $this.width();
    }
    text.css('transform', `translateX(${position}px)`);
  }, 20);
});