标签：
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。
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4674643.html
