最近作一個循環滾動展現抽獎結果的功能,示例以下
html代碼css
<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代碼html
$(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代碼spa
.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;}