jquery滚动公告效果

http://wange.im/jquery-slideshow-twitter.html

 

仿Twitter的公告效果：

方法如下：

1、HTML 部分：

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

关于输出 twitter 消息的方法很多，我就总集了两篇：WordPress 非插件调用最新 Twitter、WordPress 免插件输出最新 Twitter，已经加密，密码为：wange.im，有兴趣的朋友可以看一下。

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秒钟切换一条，你可以根据需要更改
})