jQuery实现无限循环滚动公告

今天把博客的公告栏做了一个小效果，如果有2条公告或以上就有个滚动效果，实例请移目 前端组公告栏 。在此感谢Newton同学的耐心指导，不多说了，上代码！或者你可以直接前往 DEMO 看实例

jQuery代码

//第二版：Newton改造  
 (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); 

HTML代码：

<div id="callboard"> 
 <ul> 
     <li> 
         <a href="http://www.qianduanzu.com/2012042036.html">公告：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！</a> 
     </li> 
     <li> 
         <span style="color:red;">公告：前端组上线一个月零八天，PR升为3，BD权重1</span> 
     </li> 
 </ul> 

CSS代码：(可根据需求另设)

#callboard { height:24px; line-height:24px; overflow:hidden;}  
#callboard ul { padding:0;}  
#callboard li { padding:0;} 

原文链接： http://www.cnblogs.com/qianduanzu/archive/2012/05/10/2493903.html

【编辑推荐】

支持同一页面多次使用的jQuery插件

jQuery浮动留言板插件

jQuery提供的获取元素位置的接口方法

JQuery插件的开发真的有那么难吗

随机展示头像的jQuery代码