【代码】js实现文字无缝滚动播放

陪着月亮

已于 2023-06-12 16:24:55 修改

阅读量1.6k

点赞数

分类专栏： # 项目记录文章标签： javascript 开发语言 ecmascript

于 2023-05-22 18:20:45 首次发布

本文链接：https://blog.csdn.net/xilejie/article/details/130812629

版权

项目记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

消息无缝滚动

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 500px;
            margin: 60px auto;
            background-color: pink;
        }

        .infoBox {
            width: 100%;
            height: 240px;
            overflow: hidden;
        }

        ul {
            margin-bottom: 0;
        }

        ul li {
            margin-bottom: 20px;
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="infoBox" id="infoBox">
            <ul>
                <li>01滚动消息~~~01</a></li>
                <li>02滚动消息~~~02</li>
                <li>03滚动消息~~~03</li>
                <li>04滚动消息~~~04</li>
                <li>05滚动消息~~~05</li>
                <li>06滚动消息~~~06</li>
            </ul>
        </div>
    </div>

    <script>
        window.onload = function () {
            var oInfobox = document.getElementById('infoBox'),
                intervalTime = 100, //设置时间间隔，越小速度越快
                flag = null; //设置setInterval定时器

            oInfobox.innerHTML += oInfobox.innerHTML; //复制一份内容，无缝滚动

            function startMove() {
                flag = setInterval(scrollUp, intervalTime);
            }
            function scrollUp() {
                oInfobox.scrollTop++;
                if (oInfobox.scrollTop >= oInfobox.offsetHeight) {
                    //判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
                    oInfobox.scrollTop = 0;
                }
            }
            startMove();
            oInfobox.onmouseover = function () {
                clearInterval(flag);
            }
            oInfobox.onmouseout = function () {
                flag = setInterval(scrollUp, intervalTime);
            }
        }
    </script>
</body>

</html>