js实现无缝跑马灯效果

实现无缝跑马灯效果

使用CSS动画实现

通过CSS的@keyframes和animation属性实现水平滚动的跑马灯效果。

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

<div class="marquee">
  <div class="marquee-content">这里是需要滚动的内容，可以很长很长...</div>
</div>

使用JavaScript实现

通过JavaScript动态计算位置实现更灵活的控制。

function startMarquee(selector, speed) {
  const marquee = document.querySelector(selector);
  const content = marquee.firstElementChild;
  const clone = content.cloneNode(true);
  marquee.appendChild(clone);

  let progress = 0;
  const animate = () => {
    progress -= 1;
    if (-progress >= content.offsetWidth) {
      progress = 0;
    }
    content.style.transform = `translateX(${progress}px)`;
    clone.style.transform = `translateX(${progress + content.offsetWidth}px)`;
    requestAnimationFrame(animate);
  };
  animate();
}

startMarquee('.marquee', 2);

实现垂直滚动效果

修改CSS动画方向实现垂直滚动。

.marquee-vertical {
  height: 200px;
  overflow: hidden;
}
.marquee-content-vertical {
  animation: marquee-vertical 10s linear infinite;
}
@keyframes marquee-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

响应式处理

添加窗口大小变化的监听，动态调整跑马灯效果。

window.addEventListener('resize', () => {
  const marquee = document.querySelector('.marquee');
  const content = marquee.firstElementChild;
  content.style.transform = 'translateX(0)';
});

暂停和继续功能

添加鼠标悬停暂停功能提升用户体验。

const marquee = document.querySelector('.marquee');
let isPaused = false;

marquee.addEventListener('mouseenter', () => {
  isPaused = true;
});

marquee.addEventListener('mouseleave', () => {
  isPaused = false;
});

function animate() {
  if (!isPaused) {
    // 动画逻辑
  }
  requestAnimationFrame(animate);
}

以上方法提供了多种实现无缝跑马灯效果的方案，可根据具体需求选择合适的方式。CSS动画方案简单高效，JavaScript方案则提供了更多自定义控制的可能性。