jQuery实现公告无限循环滚动

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

前端组公告栏截图

jQuery代码

 1 //第二版:Newton改造
 2 (function (win){
 3     var callboarTimer;
 4     var callboard = $('#callboard');
 5     var callboardUl = callboard.find('ul');
 6     var callboardLi = callboard.find('li');
 7     var liLen = callboard.find('li').length;
 8     var initHeight = callboardLi.first().outerHeight(true);
 9 
10     win.autoAnimation = function (){
11         if (liLen <= 1) return;
12         var self = arguments.callee;
13         var callboardLiFirst = callboard.find('li').first();
14         callboardLiFirst.animate({
15             marginTop:-initHeight
16         }, 500, function (){
17             clearTimeout(callboarTimer);
18             callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
19             callboarTimer = setTimeout(self, 5000);
20         });
21     }
22 
23     callboard.mouseenter(
24         function (){
25             clearTimeout(callboarTimer);
26         }).mouseleave(function (){
27             callboarTimer = setTimeout(win.autoAnimation, 5000);
28         });
29 }(window));
30 setTimeout(window.autoAnimation, 5000);

HTML代码:

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

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

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

Author: 前端组

posted on 2012-05-10 10:41  前端组www.qianduanzu.com  阅读(5156)  评论(3编辑  收藏  举报