jQuery 无限滚动展示

最近做一个循环滚动展示抽奖结果的功能，示例如下

html代码

    

        
                                
            
1111抽中了2222颗云豆
            
2222抽中了2222颗云豆
            
3333抽中了2222颗云豆
            
4444抽中了2222颗云豆
            
5555抽中了2222颗云豆
            
6666抽中了2222颗云豆
            
7777抽中了2222颗云豆
            
8888抽中了2222颗云豆
            
9999抽中了2222颗云豆
            
6666抽中了2222颗云豆
            
7777抽中了2222颗云豆
            
8888抽中了2222颗云豆
            
9999抽中了2222颗云豆
        
        

    

js代码

$(function(){
     var list1 = $('#list1'),
        list2 = $('#list2'),
        list_wrap = $('.list-wrap'),
        speed = 40;
    list2.html(list1.html());
    function scroll(){
        if(list2.offset().top-list_wrap.scrollTop()<=0){
            console.log(list_wrap.scrollTop() - list1.get(0).offsetHeight);
            list_wrap.scrollTop(list_wrap.scrollTop() - list1.get(0).offsetHeight);
        }else{
            list_wrap.scrollTop(list_wrap.scrollTop() + 1);
        }
    }
    var list_scroll=setInterval(scroll,speed);
    list_wrap.hover(function(){
        clearInterval(list_scroll)
    },function(){
        clearInterval(list_scroll),
        list_scroll = setInterval(scroll,speed)
    });
});

css代码

.list{width:280px;height:300px;}
.list .list-wrap {overflow:hidden;width:280px;height:300px;}
.list .list-wrap ul{margin:0;padding: 0;}
.list .list-wrap ul li{margin:0;padding:0;line-height:30px;list-style-type: none;}
.list .list-wrap ul li .name{display:inline-block;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.list .list-wrap ul li .bean{color:#ff5152;}

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hiijk1bkcib