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

 

posted on 2018-12-23 17:08  一只傻阿贝哟  阅读(395)  评论(0编辑  收藏  举报

导航