JQuery實現文字無縫滾動效果 Marquee外掛
阿新 • • 發佈:2018-12-23
推薦一個JQuery的無縫文字滾動效果,同時也可以滾動圖片,也叫做跑馬燈效果。
此jquery外掛,依託jquery庫,能實現各種滾動效果,且讓HTML程式碼符合W3C標準。
官方演示,如下:
Demo
使用方法如下:
1、載入javascript。
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.marquee.js"
- <script type="text/javascript">
- $(function(){
- $("#marquee").marquee({yScroll: "bottom"});
- });
- </script>
2、加入CSS樣式。
- ul.marquee {display: block;line-height: 1;position
- ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}
3、HTML程式碼如下:
- <ul id="marquee" >
- <li><a href="http://www.bloomylife.com/?cat=153" target="_blank"> WEB前端開發</a> [2011-10-20]</li>
- <li><a href="http://www.bloomylife.com/?cat=154" target="_blank"> 架構設計</a> [2011-09-20]</li>
- <li><a href="http://www.bloomylife.com/?cat=157" target="_blank"> 系統運維</a> [2011-10-16]</li>
- </ul>
該外掛提供了許多屬性選項,您可以配置定製外觀和效果。
- {
- yScroll: "top" // 初始滾動方向 (還可以是"top" 或 "bottom") ,
- showSpeed: 850 // 初始下拉速度 ,
- scrollSpeed: 12 // 滾動速度 ,
- pauseSpeed: 5000 // 滾動完到下一條的間隔時間 ,
- pauseOnHover: true // 滑鼠滑向文字時是否停止滾動 ,
- loop: -1 // 設定迴圈滾動次數 (-1為無限迴圈) ,
- fxEasingShow: "swing" // 緩衝效果 ,
- fxEasingScroll: "linear" // 緩衝效果 ,
- cssShowing: "marquee-showing" //定義class //
- event handlers ,
- init: null // 初始呼叫函式 ,
- beforeshow: null // 滾動前回調函式 ,
- show: null // 當新的滾動內容顯示時回撥函式 ,
- aftershow: null // 滾動完了回撥函式
- }
jquery.marquee.js可以到官網地址下載:http://www.givainc.com/labs/marquee_jquery_plugin.htm
再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!https://www.cnblogs.com/captainbed