今天把博客的公告欄做了一個(gè)小效果，如果有2條公告或以上就有個(gè)滾動(dòng)效果，實(shí)例請(qǐng)移目前端組公告欄。在此感謝Newton同學(xué)的耐心指導(dǎo)，不多說(shuō)了，上代碼！或者你可以直接前往DEMO看實(shí)例

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">公告：前端組主題正在整理中..有需要用的朋友請(qǐng)留個(gè)言，以方便及時(shí)通知！</a> 
     </li> 
     <li> 
         <span style="color:red;">公告：前端組上線一個(gè)月零八天，PR升為3，BD權(quán)重1</span> 
     </li> 
 </ul> 

CSS代碼：(可根據(jù)需求另設(shè))

#callboard { height:24px; line-height:24px; overflow:hidden;}  
#callboard ul { padding:0;}  
#callboard li { padding:0;}