基于JQuery打造无缝滚动新闻

JQuery实现 新闻无缝滚动

一.使用"首尾追加"实现无缝滚动

<head lang="en">
    <meta charset="UTF-8">
    <title>一.使用"首尾追加"实现无缝滚动</title>


    <style>
        #scroll{
            height: 100px;
            overflow: hidden;
        }
    </style>
　　

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            setInterval(function () {
                var $scroll=$("#scroll"); //获取要设置scrollTop()属性的元素
                var $top =$scroll.scrollTop(); //获取当前scrollTop值
                $scroll.scrollTop(++$top); //增加元素的scrollTop值
　　　　　　　　　　//如果元素的scrollTop值大于,它的父级容器的高度,则将第一个元素追加到最后
                if($top>=$scroll.height()){   
                    var $first = $(".content li:first").clone(true);//获取并复制第一个元素
                    $(".content>ul").append($first);//追加到最后
                    $(".content li:first").remove();//删除第一个元素
                }
            },20);
        });
    </script>
</head>
<body>
<div id="scroll">
    <div class="content">
        <ul>
            <li><a href="#">新闻1111</a></li>
            <li><a href="#">新闻2222</a></li>
            <li><a href="#">新闻3333</a></li>
            <li><a href="#">新闻4444</a></li>
            <li><a href="#">新闻5555</a></li>
            <li><a href="#">新闻6666</a></li>
            <li><a href="#">新闻7777</a></li>
            <li><a href="#">新闻8888</a></li>
            <li><a href="#">新闻9999</a></li>
            <li><a href="#">新闻1010</a></li>
        </ul>
    </div>
</div>
</body>
</html>




效果如图:




运行原理:


因为本人比较小白,不知道怎么更专业的描述,所以都把知识浓缩到图片里了,看图:


PS:第一次发博,如果有什么解释不清楚的,或不明白的欢迎回复提问!







            

            
posted @ 
2020-06-30 22:09 
青栀i 
阅读(114) 
评论(0) 
 
收藏 
举报