当前位置：首页 > JavaScript

js实现marquee

2026-04-05 14:57:46JavaScript

实现 Marquee 效果的 JavaScript 方法

使用 JavaScript 可以实现类似 HTML <marquee> 标签的滚动效果，但更加灵活且符合现代标准。以下是几种实现方式：

使用 CSS 动画和 JavaScript 控制

通过 CSS @keyframes 结合 JavaScript 动态计算宽度，实现平滑滚动：

js实现marquee

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

const duration = (content.length * 0.5); // 根据内容长度计算动画时间
marquee.style.animation = `scroll ${duration}s linear infinite`;

// CSS 部分需添加：
// @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

纯 JavaScript 实现

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

const container = document.getElementById('marquee-container');
const content = document.getElementById('marquee-content');

function scrollMarquee() {
  if (container.scrollLeft >= content.scrollWidth / 2) {
    container.scrollLeft = 0;
  } else {
    container.scrollLeft += 1;
  }
}

setInterval(scrollMarquee, 20);

使用 requestAnimationFrame

高性能的实现方式，适合需要流畅动画的场景：

js实现marquee

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

function animate() {
  position += speed;
  if (position > element.scrollWidth / 2) {
    position = 0;
  }
  element.style.transform = `translateX(-${position}px)`;
  requestAnimationFrame(animate);
}

animate();

响应式处理

添加窗口大小变化的监听，动态调整滚动速度：

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  speed = width > 768 ? 2 : 1; // 根据不同屏幕宽度调整速度
});

暂停/继续控制

添加交互控制功能：

let isPaused = false;
const toggleButton = document.getElementById('toggle-marquee');

toggleButton.addEventListener('click', () => {
  isPaused = !isPaused;
  if (!isPaused) {
    animate(); // 继续动画
  }
});

function animate() {
  if (isPaused) return;
  // ...原有动画逻辑
  requestAnimationFrame(animate);
}

这些方法提供了从简单到高级的不同实现方案，可以根据项目需求选择适合的方式。CSS 动画方案性能较好但灵活性稍差，纯 JavaScript 实现则提供更多控制选项。