js实现跑马灯效果

使用CSS动画实现跑马灯

通过CSS的@keyframes和animation属性实现文字横向滚动效果，适用于简单场景：

<div class="marquee">
  <span>这里是需要滚动的文字内容...</span>
</div>

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

使用JavaScript动态计算

通过定时器动态修改元素位置，实现更灵活的控制：

function startMarquee(element, speed = 1) {
  const container = element.parentNode;
  const containerWidth = container.offsetWidth;
  let position = containerWidth;

  function animate() {
    position -= speed;
    if (position < -element.offsetWidth) {
      position = containerWidth;
    }
    element.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
  }

  animate();
}

// 使用示例
const marqueeText = document.querySelector('.marquee span');
startMarquee(marqueeText, 2);

无缝循环跑马灯

克隆内容元素实现无缝滚动效果：

<div class="marquee-container">
  <div class="marquee-content">需要循环滚动的内容</div>
</div>

<script>
function createSeamlessMarquee() {
  const container = document.querySelector('.marquee-container');
  const content = document.querySelector('.marquee-content');
  const clone = content.cloneNode(true);
  container.appendChild(clone);

  let position = 0;
  const speed = 1;
  const contentWidth = content.scrollWidth;

  function animate() {
    position -= speed;
    if (position <= -contentWidth) {
      position = 0;
    }
    container.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
  }

  animate();
}
</script>

响应式跑马灯

结合ResizeObserver实现窗口大小变化时的自适应：

class Marquee {
  constructor(element) {
    this.element = element;
    this.content = element.querySelector('.marquee-content');
    this.clone = this.content.cloneNode(true);
    this.element.appendChild(this.clone);
    this.observer = new ResizeObserver(this.update.bind(this));
    this.observer.observe(this.element);
    this.animate();
  }

  update() {
    this.contentWidth = this.content.scrollWidth;
    this.position = 0;
  }

  animate() {
    this.position -= 1;
    if (this.position <= -this.contentWidth) {
      this.position = 0;
    }
    this.element.style.transform = `translateX(${this.position}px)`;
    requestAnimationFrame(this.animate.bind(this));
  }
}

new Marquee(document.querySelector('.marquee-container'));

带暂停控制的跑马灯

添加鼠标交互控制功能：

class InteractiveMarquee {
  constructor(element) {
    this.element = element;
    this.content = element.innerHTML;
    this.speed = 2;
    this.isPaused = false;
    this.position = element.offsetWidth;
    this.element.innerHTML = this.content + this.content;

    element.addEventListener('mouseenter', () => this.isPaused = true);
    element.addEventListener('mouseleave', () => this.isPaused = false);

    this.animate();
  }

  animate() {
    if (!this.isPaused) {
      this.position -= this.speed;
      if (this.position <= -this.element.scrollWidth/2) {
        this.position = 0;
      }
      this.element.style.transform = `translateX(${this.position}px)`;
    }
    requestAnimationFrame(this.animate.bind(this));
  }
}

new InteractiveMarquee(document.querySelector('.marquee'));

每种实现方式适用于不同场景，CSS动画方案性能最佳但控制灵活性较低，JavaScript方案可以实现更复杂的交互效果。无缝循环方案适合内容长度不固定的场景，响应式方案能更好地适应不同屏幕尺寸。