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秒 })