使用JavaScript实现文字横向滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15536303/article/details/52138417

本文介绍如何利用JavaScript编程实现文字的横向滚动效果，适用于网页动态展示长文本的场景，提升用户体验。

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

js实现文字横向滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字横向滚动</title>
<style type="text/css">
#div1 {
    width: 200px;
    height: 100px;
    margin: 80px auto;
    overflow: hidden;
    background: #DDE5ED;
    color: #0C77CF;
}

#div1 #scroll_begin, #div1 #scroll_end {
    display: inline;
}

#scroll_div {
    width: 200px;
    height: 90px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}
</style>
<script type="text/javascript">
    //取对象的封装
    function $(eleStr) {
        //为了区分，不同的取对象方式，以加前缀的方式来区分
        //id加#  class加.  name加_  tagName不加前缀  
        switch (eleStr.substr(0, 1)) {
        case "#":
            return document.getElementById(eleStr.substr(1));
            break;
        case ".":
            return document.getElementsByClassName(eleStr.substr(1));
            break;
        case "_":
            return document.getElementsByName(eleStr.substr(1));
            break;
        default:
            return document.getElementsByTagName(eleStr);
            break;
        }
    }

    function horizontalScroll() {
        var speed = 50; //滚动速度
        var scroll_begin = $("#scroll_begin");
        var scroll_end = $("#scroll_end");
        var scroll_div = $("#scroll_div");
        scroll_end.innerHTML = scroll_begin.innerHTML;
        function Marquee() {
            // offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
            // scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                scroll_div.scrollLeft -= scroll_begin.offsetWidth;
            else
                scroll_div.scrollLeft++;
        }
        var MyMar = setInterval(Marquee, speed);
        scroll_div.onmouseover = function() { //鼠标放上停止
            clearInterval(MyMar);
        }
        scroll_div.onmouseout = function() { //鼠标移开继续滚动
            MyMar = setInterval(Marquee, speed);
        }
    }
</script>
</head>
<body>

    <div id="div1">
        <div id="scroll_div" class="scroll_div">
            <div id="scroll_begin">
                <ul>
                    <li>aaaaaaa</li>
                    <li>bbbbbbbbbbbbbbbbbbbbb</li>
                    <li>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
                </ul>
            </div>
            <div id="scroll_end"></div>
        </div>
        <script type="text/javascript">
            horizontalScroll();
        </script>
    </div>
</body>
</html>