JS文字水平滚动

最新推荐文章于 2025-06-24 14:40:07 发布

原创最新推荐文章于 2025-06-24 14:40:07 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现文字的水平滚动效果，通过代码示例详细解析了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #container{
        width: 500px;
        height: 30px;
        line-height: 30px;
        margin: 20px auto;
        overflow: hidden;
        border: 2px solid lightsteelblue;
        border-radius: 5px;
        white-space: nowrap;
    }
    #container ul{
        display: inline-block;
    }
</style>

<body>
<div id="container">
    <ul id="main">
        <li>安静这安静的夜 你身影依稀的浮现 这种凄美的感觉 还会有谁能够了解</li>
    </ul>
    <ul id="ext">
        <!-- 安静这安静的夜 你身影依稀的浮现这种凄美的感觉 还会有谁能够了解 -->
    </ul>
</div>
<script>
    var container = document.getElementById('container'),
        main = document.getElementById('main'),
        ext = document.getElementById('ext');
    ext.innerHTML = main.innerHTML;
    function move() {
        container.scrollLeft++;
        if (container.scrollLeft >= main.scrollWidth) {
            container.scrollLeft = 0;
        }
    }
    var timer = window.setInterval(move,10);
    container.onmouseover = function(){
        window.clearInterval(timer);
    }
    container.onmouseout = function(){
        timer = window.setInterval(move,10);
    }
</script>
</body>

</html>