你的位置:首页 > Java教程

[Java教程]jquery文字垂直滚动代码实例


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="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>

以上代码实现了文字上下垂直滚动功能,并且滚动带有间歇性。下面介绍一下实现过程:

一.实现原理:

之所以向上滚动有时间间隔,是因为使用了setTimeout()函数递归调用,3秒后调用一次函数b()。函数b()定义了运动的规则,把news_li中的内容拷贝一份放到swap中去,然后不断设置news_li的top属性值,这样就形成了上滚动作,当news_li元素全部上滚完成之后,就是news_li接续,以免出现滚动断层现象,然后再将y的值赋值给x,这样就实现了news_li新一轮的上滚动作,这样就实现了不间断的上滚动作。

二.代码注释:

1.function b(){},创建函数b,它定义了滚动规则。

2.t=parseInt(x.css('top')),获取x的top属性值,即news_li的top属性值。

3.y.css('top','19px'),将y的top属性值设置为19px。注意每一个li元素的高度就是19px,这个很关键。

4.x.animate({top:t - 19 + 'px'},'slow'),以动画方式将x上滚19px。

5.if(Math.abs(t) == h-19){},用以判断x元素也就是news_li是否还剩下一个li没有上滚完成。

6.y.animate({top:'0px'},'slow'),将y也就是swap的top属性值设置为0px。

7.z=x,x=y,y=z,进行一系列的值传递,最终目的就是为了将x中的内容用y中的替代。

8.setTimeout(b,3000),使用递归调用函数b。

9.$(document).ready(function(){},文档结构完全加载完毕再执行函数中的代码。

10.$('.swap').html($('.news_li').html()),将news_li中的内容赋值给swap。

11.x=$('.news_li'),获取x=$('.news_li')对象。

12.y=$('.swap'),获取swap'对象。

13.h=$('.news_li li').length*19,新闻的条数乘以19,19是li的高度。

14.setTimeout(b,3000),3秒后调用函数b。