JQ- 文字左右滚动

最新推荐文章于 2024-08-02 04:08:12 发布

Lucy-

最新推荐文章于 2024-08-02 04:08:12 发布

阅读量4.1k

点赞数 2

分类专栏： # JQuery

本文链接：https://blog.csdn.net/lm1022/article/details/79383905

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字左右滚动</title>
</head>
<style>
    * {
        padding:0;
        margin:0;
        font-family:"微软雅黑";
    }
    li {
        list-style:none;
    }
    a {
        text-decoration:none;
    }
    .box {
        padding-left:50px;
        margin-top:100px;
        margin-left:100px;
    }
    .Box {
        width:150px;
        height:40px;
        overflow:hidden;
        position:relative;
        background:pink;
    }
    .scroll {
       width:150px;/*width的大小是根据下面li的长度和li个数而定的！*/
        position:absolute;
        left:0 ;
        top:0 ;
    }
    .scroll li {
        width:150px;
        float:left;
        line-height:40px;
        text-align:center;
    }

</style>
<body>
<div class="box">
    <div class="Box">
        <ul class="scroll">
            <li><a href="#">滚动的文字</a></li>
        </ul>
    </div>
</div>
</body>
<script src="../libs/jquery-3.2.1.min.js"></script>
<script>
    $(function() {
        var num = 0;
        function goLeft() {
            if (num == -120) {//120是根据你给的尺寸，可变的
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                left: num
            })
        }
        //滚动速度
        var timer = setInterval(goLeft, 50);
        //鼠标经过时滚动停止
        $(".box").hover(function() {
                    clearInterval(timer);
                },
                function() {
                    timer = setInterval(goLeft, 50);
                })
    })
</script>
</html>