jQuery实现公告无限循环滚动

jQuery代码  转自：http://www.cnblogs.com/qianduanzu/archive/2012/05/10/2493903.html

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

转载于:https://www.cnblogs.com/whyapi/archive/2012/05/10/2494692.html

相关资源：数据结构—成绩单生成器