js实现文字循环滚动
实现文字循环滚动的JavaScript方法
使用CSS动画结合JavaScript可以实现文字循环滚动效果。以下是两种常见实现方式：
使用CSS动画和JavaScript控制
<div class="scroll-container">
<div class="scroll-text">这里是需要循环滚动的文字内容</div>
</div>.scroll-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll-text {
display: inline-block;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}// 控制动画暂停和播放
const scrollText = document.querySelector('.scroll-text');
scrollText.addEventListener('mouseenter', () => {
scrollText.style.animationPlayState = 'paused';
});
scrollText.addEventListener('mouseleave', () => {
scrollText.style.animationPlayState = 'running';
});纯JavaScript实现
<div id="marquee" style="width:100%; overflow:hidden;">
<span id="marqueeText">这里是需要循环滚动的文字内容</span>
</div>const marquee = document.getElementById('marquee');
const text = document.getElementById('marqueeText');
const containerWidth = marquee.offsetWidth;
let position = containerWidth;
function scroll() {
position--;
if (position < -text.offsetWidth) {
position = containerWidth;
}
text.style.transform = `translateX(${position}px)`;
requestAnimationFrame(scroll);
}
scroll();动态内容处理
当需要处理动态变化的文字内容时：
function updateMarquee(newText) {
const textElement = document.getElementById('marqueeText');
textElement.textContent = newText;
position = marquee.offsetWidth; // 重置位置
}性能优化建议
使用CSS transform而不是直接修改left/top属性可以获得更好的性能 对于大量文本或复杂场景，考虑使用Web Animation API 适当使用will-change属性提示浏览器优化
响应式处理
添加窗口大小变化的监听，调整滚动参数：
window.addEventListener('resize', () => {
position = marquee.offsetWidth;
});以上方法可以根据实际需求进行调整，如改变滚动方向、速度或添加暂停/继续控制等功能。
