js实现div跑马灯效果

<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%); }
}

// 如果需要动态控制跑马灯的开始和停止，可以使用以下JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
    var marquee = document.getElementById('marquee');
    var marqueeText = marquee.querySelector('span');

    // 开始跑马灯
    function startMarquee() {
        marqueeText.style.animationPlayState = 'running';
    }

    // 停止跑马灯
    function stopMarquee() {
        marqueeText.style.animationPlayState = 'paused';
    }

    // 示例：页面加载完成后自动开始跑马灯
    startMarquee();
});