滚动字幕js

<div id="marquee">
  <span>这是一个滚动字幕示例。</span>
</div>

#marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

#marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

document.addEventListener("DOMContentLoaded", function() {
  const marquee = document.getElementById('marquee');
  const text = marquee.querySelector('span');
  const textWidth = text.offsetWidth;
  const marqueeWidth = marquee.offsetWidth;

  text.innerHTML += ' ' + text.innerHTML; // 循环滚动
});

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

function scrollText() {
  const text = document.querySelector('#marquee span');
  let position = 0;
  const speed = 0.5;

  function animate() {
    position -= speed;
    text.style.transform = `translateX(${position}px)`;
    if (Math.abs(position) < text.offsetWidth) {
      requestAnimationFrame(animate);
    } else {
      position = text.offsetWidth;
      requestAnimationFrame(animate);
    }
  }

  animate();
}

document.addEventListener("DOMContentLoaded", scrollText);