js 实现无缝隙滚屏

最新推荐文章于 2021-04-15 16:57:17 发布

weixin_30341745

最新推荐文章于 2021-04-15 16:57:17 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jianglei233/p/7778315.html

版权

页面代码

.scroll{
            overflow:hidden;
            position:relative;
        }
.scroll li{
            line-height:20px;
            position:absolute;
            
        }
        


<div class="scroll" style="height:240px;">
<ul>

<li style="top:0">1111111111111</li>
<li style="top:20px">22222222222</li>
<li style="top:40px">33333333333</li>
<li style="top:60px">44444444444</li>
<li style="top:80px">55555555555</li>
<li style="top:100px">66666666666</li>
                                
</ul>
</div>

js代码

<script type="text/javascript">
            $(function(){
                var lis=$(".scroll li");
                gun=setInterval(function() {
                    $.each(lis,function(index,li){
                    var list=$(li);
                    var height=parseFloat(list.css("lineHeight");
                    var top=parseFloat(list.css("top"));
                    list.css("top",top-1);
                    if(top<-height){
                        var bottom=(lis.length-1)*height;
                        list.css("top",bottom)
                    }
                });
                }, 50)
                //停止滚动
                var div=$(".scroll ul");
                div.hover(function(){
                    clearInterval(gun)
                },function(){
                    gun=setInterval(function() {
                    $.each(lis,function(index,li){
                    var list=$(li);
                    var height=parseFloat(list.css("lineHeight");
                    var top=parseFloat(list.css("top"));
                    list.css("top",top-1);
                    if(top<-height){
                        var bottom=(lis.length-1)*height;
                        list.css("top",bottom)
                    }
                });
                }, 50)
                });
            });

转载于:https://www.cnblogs.com/jianglei233/p/7778315.html