您所在的位置:小祥子 » 编程 » JavaScript » 正文

jquery文字垂直滚动代码实例

时间:2015-07-24 编辑:一落叶而知秋 来源:Cnblogs

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。

关键词:文字 垂直 滚动 代码