最近做一个循环滚动展示抽奖结果的功能,示例如下
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;}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。