jquery实现跑马灯效果

最新推荐文章于 2023-09-23 15:14:41 发布

陳爍

最新推荐文章于 2023-09-23 15:14:41 发布

阅读量1.2k

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_42466247/article/details/107549783

版权

jquery实现横向跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.2.1.min.js"></script>
    <style>
        .container{
            width: 717px;
            overflow: scroll;
            display: flex;
            align-items: center;
        }
        ul{
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            border: 0;
        }
        li{
            list-style: none;
            width: 250px;
            flex: 1;
            background-color: red;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container" id="horse-light-coantainer">
        <ul id="horse-light-list">
            <li class="horse-light-item">11111111111111111111111111</li>
            <li class="horse-light-item">22222222222222222222222222</li>
            <li class="horse-light-item">33333333333333333333333333</li>
            <li class="horse-light-item">44444444444444444444444444</li>
            <li class="horse-light-item">55555555555555555555555555</li>
        </ul>
    </div>
</body>
<script>
    let hContainer = $("#horse-light-coantainer");
    let hList = $("#horse-light-list");
    let hItem = $(".horse-light-item");
    let itemWord = ".horse-light-item";
    
    //moveNumber 指每一个移动项的宽度（width+padding+border+margin）
    let moveNumber = hItem.outerWidth(true);
    
    let timeId = setInterval(function(){
        if(hContainer[0].scrollLeft == moveNumber){
            hContainer[0].scrollLeft = 0;   
            $(itemWord).eq(0).appendTo(hList);
        }
        hContainer[0].scrollLeft++;
    },50);
</script>
</html>

hContainer[0] 是jQuery对象转成js对象的一种引用，js对象才能获取到scrollLeft ，具体可参考下图：
关于jQuery与JS间对象的转换

陳爍

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现跑马灯效果

jquery实现跑马灯效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery-3
复制链接

扫一扫