新闻公告具有时间间隔垂直滚动代码

Html

Css

Js

  

    
 素材牛欢迎您 
    
 每一天都是新的，请珍惜 
    
只有奋斗才会有美好的明天
  

*{ margin:0; padding:0; } li { list-style:none; } #callboard { width:600px; margin:100px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:12px; background-color:#f5f5f5; } #callboard ul { padding:0; } #callboard li { padding:0; }

$(document).ready(function(){ (function (win){ var callboarTimer; var callboard=$('#callboard'); var callboardUl=callboard.find('ul'); var callboardLi=callboard.find('li'); var liLen=callboard.find('li').length; var initHeight=callboardLi.first().outerHeight(true); win.autoAnimation=function(){ if(liLen<=1) { return; } var self=arguments.callee; var callboardLiFirst=callboard.find('li').first(); callboardLiFirst.animate({ marginTop:-initHeight }, 500, function (){ clearTimeout(callboarTimer); callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); callboarTimer = setTimeout(self, 5000); }) } callboard.mouseenter( function (){ clearTimeout(callboarTimer); }).mouseleave(function (){ callboarTimer = setTimeout(win.autoAnimation, 5000); }) }(window)); setTimeout(window.autoAnimation, 5000); })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.8.3

以上代码实现了我们想要的效果，下面就介绍一下它的实现过程。

一、实现原理:

autoAnimation函数可以通过animate()函数调整ul元素中第一个li元素的margintop属性值，调整的大小刚好是第一个li元素的高度，这样第一个li元素就会向上滚动逐渐被隐藏，第二个li元素也就逐渐被显示，然后再将第一个元素挪动到ul元素内部的最后面，这样不断的重复就是实现滚动效果，之所以有时间间隔是因为通过setTimeout()函数每5秒递归调用一次autoAnimation函数的原因。

二、代码注释:

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

2.(function(win){})(window)，创建并执行一个函数，参数为window对象。

3.var callboarTimer，声明一个变量，用于存储setTimeout()函数的返回值。

4.var callboard=$('#callboard')，获取id属性值为callboard'的对象。

5.var callboardUl=callboard.find('ul')，获取callboard下的所有ul对象集合。

6.var callboardLi=callboard.find('li')，获取callboard下的所有li对象集合。

7.var liLen=callboard.find('li').length，获取li元素的数量。

8.var initHeight=callboardLi.first().outerHeight(true)，获取第一个li元素的高度，外边距计算在内。

9.win.autoAnimation=function(){}，此函数用来实现向上滚动效果。

10.if(liLen<=1){return;},如果li元素的个数小于等于1，那就不用滚动了。

11.var self=arguments.callee，将当前函数对象的引用赋值给self变量。

12.var callboardLiFirst=callboard.find('li').first()，获取第一个li元素。

13. callboardLiFirst.animate({})，在500毫秒内调整margintop属性值，这样第一个li就会被隐藏，第二个li就会被显示出来，在margin-top调整完毕之后，将第一个li元素位置放置于ul元素的内部的最后面,最后5秒之后再调用autoAnimation函数，以此往复循环，这样就是先了不断的滚动效果。

14.callboard.mouseenter(function(){clearTimeout(callboarTimer); })，注册mouseenter事件处理函数，鼠标放在div上滚动停止。

15.mouseleave(function (){ callboarTimer=setTimeout(win.autoAnimation, 5000); }) ,注册mouseleave事件处理函数，当鼠标离开时，继续开始滚动。

16. setTimeout(window.autoAnimation,5000);  5秒后调用autoAnimation函数。