你的位置:首页 > 软件开发 > Java > jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例

发布时间:2015-07-24 21:00:13
jquery文字垂直滚动代码实例:文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现。代码实例如下:<!DOCTYPE html><html><head><meta charset="utf- ...

jquery文字垂直滚动代码实例:

文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现。

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">*{ padding:0; margin:0; font-size:12px}ul, li{ list-style:none;}.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;}</style><script src='/images/loading.gif' data-original="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">function b(){  t=parseInt(x.css('top')); y.css('top','19px');  x.animate({top: t - 19 + 'px'},'slow'); if(Math.abs(t) == h-19){   y.animate({top:'0px'},'slow');  z=x;  x=y;  y=z; } setTimeout(b,3000);}$(document).ready(function(){ $('.swap').html($('.news_li').html()); x=$('.news_li'); y=$('.swap'); h=$('.news_li li').length*19; setTimeout(b,3000);})</script></head><body><div class="box"> <div class="t_news"><b>最新播报:</b>  <ul class="news_li">   <li><a href="#" target="_blank">蚂蚁部落欢迎您</a></li>   <li><a href="#" target="_blank">每一天太阳都是新的</a></li>   <li><a href="#" target="_blank">只有奋斗才会有前途</a></li>   <li><a href="#" target="_blank">高手都是从菜鸟走过来的</a></li>   <li><a href="#" target="_blank">没有最好,只有更好</a></li>  </ul>  <ul class="swap">  </ul> </div></div></body></html>

原标题:jquery文字垂直滚动代码实例

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录