单行文字滚动js代码

<div id="scrollingText">
    这是一段很长的文字示例，用于展示单行文字滚动效果。
</div>

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

function scrollText() {
    var textElement = document.getElementById('scrollingText');
    var textWidth = textElement.scrollWidth;
    var containerWidth = textElement.clientWidth;

    // 设置初始位置
    textElement.style.transform = 'translateX(' + containerWidth + 'px)';

    // 开始滚动
    setInterval(function() {
        textElement.style.transition = 'transform 0.5s linear';
        textElement.style.transform = 'translateX(-' + textWidth + 'px)';
        
        // 滚动完成后重置位置
        setTimeout(function() {
            textElement.style.transition = 'none';
            textElement.style.transform = 'translateX(' + containerWidth + 'px)';
        }, 500);
    }, 3000); // 每3秒滚动一次
}

window.onload = scrollText;