jQuery 无限滚动展示

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

html代码

<div class="list">
    <div class="list-wrap">
        <ul class="list-ul" id="list1">                                
            <li><span class="name">1111</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">2222</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">3333</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">4444</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">5555</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">6666</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">7777</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">8888</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">9999</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">6666</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">7777</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">8888</span>抽中了<span class="bean">2222</span>颗云豆</li>
            <li><span class="name">9999</span>抽中了<span class="bean">2222</span>颗云豆</li>
        </ul>
        <ul class="list-ul" id="list2"></ul>
    </div>
</div>

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