推薦一個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. }