js 实现 marquee

实现 Marquee 效果

使用 JavaScript 实现 Marquee（跑马灯）效果可以通过多种方式完成，以下是几种常见的方法：

使用 CSS 动画结合 JavaScript

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

<div id="marquee" style="overflow: hidden; white-space: nowrap;">
  <span id="marquee-content">这里是需要滚动的内容，可以很长很长...</span>
</div>

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

// 克隆内容以实现无缝滚动
marqueeContent.innerHTML += marqueeContent.innerHTML;

// 获取内容宽度
const contentWidth = marqueeContent.scrollWidth / 2;

// 设置动画
marqueeContent.style.animation = `scroll ${contentWidth / 50}s linear infinite`;

// 定义 CSS 动画
const style = document.createElement('style');
style.innerHTML = `
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-${contentWidth}px); }
  }
`;
document.head.appendChild(style);

使用 JavaScript 定时器

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

<div id="marquee" style="overflow: hidden; white-space: nowrap;">
  <span id="marquee-content">这里是需要滚动的内容，可以很长很长...</span>
</div>

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

// 克隆内容
marqueeContent.innerHTML += marqueeContent.innerHTML;

let position = 0;
const speed = 2; // 滚动速度

function scrollMarquee() {
  position -= speed;
  if (position <= -marqueeContent.scrollWidth / 2) {
    position = 0;
  }
  marqueeContent.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(scrollMarquee);
}

scrollMarquee();

使用 HTML <marquee> 标签（不推荐）

虽然 HTML 原生支持 <marquee> 标签，但已过时，不建议在现代项目中使用。仅作参考：

<marquee behavior="scroll" direction="left">
  这里是需要滚动的内容，可以很长很长...
</marquee>

注意事项

1. 性能优化：使用 requestAnimationFrame 替代 setInterval 可以获得更流畅的动画效果。
2. 响应式设计：动态计算内容宽度以适应不同屏幕尺寸。
3. 无缝滚动：通过克隆内容并重置位置实现无缝循环。
4. 暂停交互：可以通过 JavaScript 监听鼠标事件实现悬停暂停功能。

marquee.addEventListener('mouseenter', () => {
  marqueeContent.style.animationPlayState = 'paused';
});

marquee.addEventListener('mouseleave', () => {
  marqueeContent.style.animationPlayState = 'running';
});