jquery滚动公告效果

 

仿Twitter的公告效果：

方法如下：

1、HTML 部分：

<ul  
 id= 
 "twitter" 
 > 
 
     
 <li> 
 第一条消息 
 </li> 
 
     
 <li> 
 第二条消息 
 </li> 
 
     
 <li> 
 第三条消息 
 </li> 
 
</ul>

2、载入 JQuery

直接用 google 托管的就行。

<script  
 type= 
 "text/javascript" 
 src= 
 "http://ajax.googleapis.com/ajax/libs/jquery 
 
/1.2.6/jquery.min.js" 
 ></script>

3、JQuery 执行代码

$( 
 document 
 ). 
 ready( 
 function 
 (){ 
 
     
 $( 
 "#twitter li:not(:first)" 
 ). 
 css( 
 "display" 
 , 
 "none"); 
 
     
 var B 
 = 
 $( 
 "#twitter li:last"); 
 
     
 var  
 C 
 = 
 $( 
 "#twitter li:first"); 
 
     
 setInterval( 
 function 
 (){ 
 
     
 if(B 
 . 
 is( 
 ":visible" 
 )){ 
 
     
 C 
 . 
 fadeIn( 
 500 
 ). 
 addClass( 
 "in");B 
 . 
 hide() 
 
     
 } 
 else 
 { 
 
     
 $( 
 "#twitter li:visible" 
 ). 
 addClass( 
 "in"); 
 
     
 $( 
 "#twitter li.in" 
 ). 
 next 
 (). 
 fadeIn( 
 500); 
 
     
 $( 
 "li.in" 
 ). 
 hide 
 (). 
 removeClass( 
 "in" 
 )} 
 
     
 }, 
 3000)  
 //每3秒钟切换一条，你可以根据需要更改 
 
})