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。