jQuery实现公告无限循环滚动
今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。在此感谢Newton同学的耐心指导,不多说了,上代码!或者你可以直接前往DEMO看实例。
jQuery代码
1 //第二版:Newton改造 2 (function (win){ 3 var callboarTimer; 4 var callboard = $('#callboard'); 5 var callboardUl = callboard.find('ul'); 6 var callboardLi = callboard.find('li'); 7 var liLen = callboard.find('li').length; 8 var initHeight = callboardLi.first().outerHeight(true); 9 10 win.autoAnimation = function (){ 11 if (liLen <= 1) return; 12 var self = arguments.callee; 13 var callboardLiFirst = callboard.find('li').first(); 14 callboardLiFirst.animate({ 15 marginTop:-initHeight 16 }, 500, function (){ 17 clearTimeout(callboarTimer); 18 callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); 19 callboarTimer = setTimeout(self, 5000); 20 }); 21 } 22 23 callboard.mouseenter( 24 function (){ 25 clearTimeout(callboarTimer); 26 }).mouseleave(function (){ 27 callboarTimer = setTimeout(win.autoAnimation, 5000); 28 }); 29 }(window)); 30 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;}
Author: 前端组
posted on 2012-05-10 10:41 前端组www.qianduanzu.com 阅读(5156) 评论(3) 编辑 收藏 举报