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

admin

发表文章数:3228

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

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

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="http://neirong.org/" target="_blank">水果忍者:穿靴子的猫</a></li>
			<li><a href="http://neirong.org/" target="_blank">乐动魔方 Plus</a></li>
			<li><a href="http://neirong.org/" target="_blank">亡灵杀手 汉化版</a></li>
			<li><a href="http://neirong.org/" target="_blank">xw素材网 搜集整理</a></li>
			<li><a href="http://neirong.org/" target="_blank">你疯啦 iphone壁纸</a></li>
		</ul>
		<ul class="swap"></ul>
	</div>
</div>
<!-- 代码 结束 -->

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《jquery实现单行文字循环上翻滚动播报效果(新闻滚动效果)》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

7 + 6 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册