js控制文字滚动效果-通用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box {
        position: relative;
        width: 200px;
        height: 50px;
        overflow: hidden;
        border: solid 1px;
    }
    ul{display:flex; position: absolute;width:200px;overflow:hidden;justify-content:space-around;}
    ul li{list-style:none;}
    .col2 {left:200px;} /* 让第二列顶着第一列的末尾*/
</style>
<body>
<div class="box" id="box">
    <ul class="col1" id="col1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul class="col2" id="col2">
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
</div>
 <script>
    var LEN = 200;      // 一个完整滚动条的长度
    var x = 0;
    var t;
    window.onload = roll;
    function roll() {
        var $col1 = document.getElementById("col1");
        var $col2 = document.getElementById("col2");

        var fun = function(){
            $col1.style.left = x + 'px';
            $col2.style.left = (x + LEN) + 'px';
            x--;
            if( (x + LEN) == 0 ){
                x = 0;
            }
        };
        t = setInterval(fun,10);
    }
    // 可以再加上鼠标移入停止滚动的函数，这个可以参考我上一篇博客
</script> 
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容