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秒钟切换一条，你可以根据需要更改 }) 相关资源：jQuery网站公告上下滚动展示.zip