jquery实现单行文字循环上翻滚动播报效果(新闻滚动效果)

常见的网站单行新闻公告上翻播放的效果。

bobao.jpg

jQuery代码:

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秒
	
})
CSS代码:
.box{ height:35px; background:#000; overflow:hidden;}
.t_news{ height:19px; color:#fff; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
.t_news b{ line-height:19px; font-weight:bold; display:inline-block;}
.news_li,.swap{ line-height:19px; display:inline-block; position:absolute; top:0; left:72px;}
.news_li a,.swap a{ color:#fff;}
.swap{top:19px;}
HTML代码:
<!-- 代码 开始 -->
<div class="box">
	<div class="t_news">
		<b>最新播报:</b>
		<ul class="news_li">
			<li><a href="https://www.tddx.net/" target="_blank">水果忍者:穿靴子的猫</a></li>
			<li><a href="https://www.tddx.net/" target="_blank">乐动魔方 Plus</a></li>
			<li><a href="https://www.tddx.net/" target="_blank">亡灵杀手 汉化版</a></li>
			<li><a href="https://www.tddx.net/" target="_blank">xw素材网 搜集整理</a></li>
			<li><a href="https://www.tddx.net/" target="_blank">你疯啦 iphone壁纸</a></li>
		</ul>
		<ul class="swap"></ul>
	</div>
</div>
<!-- 代码 结束 -->
关键词: jQuery jquery特效