当前位置：首页 > JavaScript

js 实现走马灯

2026-03-01 06:51:53JavaScript

实现走马灯效果的方法

使用CSS动画和JavaScript控制

通过CSS的@keyframes定义动画，结合JavaScript动态控制内容切换。

<div class="marquee-container">
  <div class="marquee-content">这里是走马灯内容1 | 内容2 | 内容3</div>
</div>

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

// 动态更新内容
document.querySelector('.marquee-content').textContent = '新内容1 | 新内容2';

纯JavaScript实现

通过定时器动态修改元素位置实现滚动效果。

<div id="marquee" style="width:300px;overflow:hidden;">
  <span id="marqueeText">需要滚动的文字内容</span>
</div>

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

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

scrollMarquee();

使用第三方库

例如使用jQuery插件快速实现：

<div class="marquee">滚动内容</div>

$('.marquee').marquee({
  duration: 5000,
  gap: 50,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

响应式走马灯

添加窗口大小监听，自适应容器宽度：

function initMarquee() {
  const container = document.querySelector('.marquee-container');
  const content = document.querySelector('.marquee-content');

  function updateSpeed() {
    const widthRatio = content.scrollWidth / container.offsetWidth;
    content.style.animationDuration = `${10 * widthRatio}s`;
  }

  window.addEventListener('resize', updateSpeed);
  updateSpeed();
}

initMarquee();

垂直走马灯

修改CSS实现垂直滚动效果：

js 实现走马灯

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

关键点在于根据实际需求选择实现方式，CSS方案性能较好但控制灵活性较低，纯JavaScript方案可实现更复杂的交互逻辑。