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

评论总数：0 条 [ 查看全部 ] 网友评论