小标题的向上无缝滚动

最新推荐文章于 2023-07-17 10:38:23 发布

abcdef_fedcba

最新推荐文章于 2023-07-17 10:38:23 发布

阅读量169

点赞数

文章标签： js ViewUI

本文链接：https://blog.csdn.net/abcdef_fedcba/article/details/80127084

版权

图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            .scroll-box{position: relative; width: 50%; margin:30px auto; height: 40px; overflow: hidden; background: lightgoldenrodyellow; border-radius:60px;}
            .scroll-ul{ position: absolute; left:0; top: 0; width: 100%;}
            .scroll-ul li{ height: 40px; line-height: 40px; width: 100%; text-align: center;}
        </style>
    </head>
    <body>
        <div class="scroll-box">
            <ul class="scroll-ul">
                <li>1111111111</li>
                <li>2222222222</li>
                <li>3333333333</li>
                <li>4444444444</li>
            </ul>
        </div>
        <script type="text/javascript">
            function scrolling(height,num){
                var li=$('.scroll-ul li').slice(0,num);
                $('.scroll-ul').animate({'top':-height*num},1000,function(){
                    $('.scroll-ul').append(li).css('top',0);       //通过slice方法得到的对象，用append方法添加到页面中时，相当于是把元素从一个位置转移到了另一个位置，原来的位置不再有
                })
            }

            $(function(){
                var timer=setInterval("scrolling(40,1)",3000);        //seInterval中的第一个参数要用引号引起来，并且使用括号
            })
        </script>
    </body>
</html>