柠檬铺

jQuery实现公告无限循环滚动

—

由

柠檬铺
于

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

jQuery代码

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

//第二版：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代码：

双击代码全选

1

2

3

4

5

6

7

8

9

<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代码：(可根据需求另设)

双击代码全选

1

2

3

#callboard { height:24px; line-height:24px; overflow:hidden;}    

#callboard ul { padding:0;}    

#callboard li { padding:0;}