推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。

此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。

官方演示，如下： Demo

使用方法如下：

1、載入javascript。

1. <scripttype="text/javascript"src="js/jquery.js"></script>
2. <scripttype="text/javascript"src="js/jquery.marquee.js"></script>
3. <scripttype="text/javascript">
4. $(function
   (){
5. $("#marquee").marquee({yScroll:"bottom"});
6. });
7. </script>

2、加入CSS樣式。

1. ul.marquee {display: block;line-height:1;position: relative;overflow: hidden;width:400px;  height:22px;}
2. ul.marquee li {position: absolute; top:-999em;left:0;display: block;  white-space: nowrap; padding:3px5px; text-indent:0.8em;}

3、HTML程式碼如下：

1. <ulid="marquee">
2. <li><ahref="http://www.bloomylife.com/?cat=153"target="_blank">  WEB前端開發</a> [2011-10-20]</li>
3. <li><ahref="http://www.bloomylife.com/?cat=154"target="_blank">  架構設計</a> [2011-09-20]</li>
4. <li><ahref="http://www.bloomylife.com/?cat=157"target="_blank"
   >  系統運維</a> [2011-10-16]</li>
5. </ul>

該外掛提供了許多屬性選項，您可以配置定製外觀和效果。

1. {
2. yScroll:"top"// 初始滾動方向 (還可以是"top" 或 "bottom")         ,
3. showSpeed:850// 初始下拉速度         ,
4. scrollSpeed:12// 滾動速度         ,
5. pauseSpeed:5000// 滾動完到下一條的間隔時間         ,
6. pauseOnHover:true// 滑鼠滑向文字時是否停止滾動         ,
7. loop:-1// 設定迴圈滾動次數 （-1為無限迴圈）         ,
8. fxEasingShow:"swing"// 緩衝效果         ,
9. fxEasingScroll:"linear"// 緩衝效果         ,
10. cssShowing:"marquee-showing"//定義class           //
11. event handlers         ,
12. init:null// 初始呼叫函式         ,
13. beforeshow:null// 滾動前回調函式         ,
14. show:null// 當新的滾動內容顯示時回撥函式         ,
15. aftershow:null// 滾動完了回撥函式 
16. }