1. 程式人生 > >jquery單行文字上下迴圈滾動

jquery單行文字上下迴圈滾動

html程式碼:

<div class="box"> <div class="t_news"> <b>已關聯獎勵賬號、暱稱:</b> <ul class="news_li"> <li>張XX 151****0623</li> <li>陳XX 159****8933</li> <li>吳XX 188****5113</li> <li>徐XX 176****3323</li> <li>趙XX 187****5553</li>
</ul> <ul class="swap"></ul> </div> </div>   css程式碼: *{ padding:0; margin:0; font-size:12px} ul,li{ list-style:none;} .box{ height:35px; overflow:hidden;} .t_news{ height:19px; color:#444; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
.t_news b{ line-height:17px; font-weight:normal; display:inline-block;} .news_li,.swap{ line-height:19px; display:inline-block; position:absolute;left:72px;} .news_li ,.swap {color:#444;} .swap{top:19px;}   js程式碼: // JavaScript Document function b(){   
    t = parseInt(x.css('top'));     y.css('top','19px');         x.animate({top: t - 19 + 'px'},'slow'); //19為每個li的高度     if(Math.abs(t) == h-19){ //19為每個li的高度         y.animate({top:'0px'},'slow');         z=x;         x=y;         y=z;     }     setTimeout(b,3000);//滾動間隔時間 現在是3秒 } $(document).ready(function(){     $('.swap').html($('.news_li').html());     x = $('.news_li');     y = $('.swap');     h = $('.news_li li').length * 19; //19為每個li的高度     setTimeout(b,3000);//滾動間隔時間 現在是3秒 })