当前位置：首页 > JavaScript

js 实现走马灯

2026-01-30 15:48:19JavaScript

实现走马灯效果的方法

使用CSS动画和HTML结构

通过CSS的@keyframes和transform属性实现水平滚动的走马灯效果。HTML结构需将内容包裹在容器内，CSS设置动画循环移动。

js 实现走马灯

<div class="marquee">
  <div class="marquee-content">这里是走马灯内容，可以替换为任意文本或元素。</div>
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

使用JavaScript动态控制

通过定时器动态修改元素的left或transform属性，实现更灵活的交互控制（如暂停、调速）。

js 实现走马灯

const marquee = document.querySelector('.marquee-content');
let position = 0;
const speed = 2;

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

无缝循环的优化方案

克隆内容节点并拼接，当原始内容滚动完成后立即显示克隆内容，避免视觉断层。

const container = document.querySelector('.marquee');
const content = document.querySelector('.marquee-content');
content.innerHTML += content.innerHTML; // 克隆内容

let scrollPos = 0;
setInterval(() => {
  scrollPos += 1;
  if (scrollPos >= content.offsetWidth / 2) {
    scrollPos = 0;
  }
  container.scrollLeft = scrollPos;
}, 20);

响应式处理

通过监听窗口大小变化，动态调整走马灯速度或布局。

window.addEventListener('resize', () => {
  const viewportWidth = window.innerWidth;
  document.querySelector('.marquee-content').style.animationDuration = 
    viewportWidth < 768 ? '15s' : '10s';
});