1. 程式人生 > >JQuery實現文字無縫滾動效果 Marquee外掛

JQuery實現文字無縫滾動效果 Marquee外掛

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

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

官方演示,如下: 
Demo

使用方法如下:

1、載入javascript。

 
 
  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/jquery.marquee.js"
    ></script> 
  3. <script type="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: 3px 5px; text-indent:0.8em;}

3、HTML程式碼如下:

 
 
  1. <ul id="marquee" >       
  2. <li><a href="http://www.bloomylife.com/?cat=153" target="_blank">  WEB前端開發</a> [2011-10-20]</li>       
  3. <li><a href="http://www.bloomylife.com/?cat=154" target="_blank">  架構設計</a> [2011-09-20]</li>       
  4. <li><a href="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. }

jquery.marquee.js可以到官網地址下載:http://www.givainc.com/labs/marquee_jquery_plugin.htm

再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!https://www.cnblogs.com/captainbed