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.php100.com/html/webkaifa/javascript/2012/0513/10396.html

posted on 2012-05-15 11:11  senly  阅读(627)  评论(0编辑  收藏  举报

导航