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;}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku