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="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> <!-- 代码 结束 -->
下一篇 >>