liScroll 能提供像是一般新聞跑馬燈的效果,讓網頁開發者能簡單的來產生新聞跑馬燈!
套件名稱:liScroll
套件版本:1.0
作者網站:http://www.gcmingati.net/wordp......-liscroll/scrollanimate.html
套件網址:http://plugins.jquery.com/project/liScroll
發佈日期:2007-12-17
檔案大小:1.22 KB
檔案下載:jquery.li-scroller.1.0.js li-scroller.css
參數說明:
檢視原始碼 JavaScript
1 2 3 | travelocity(選填) 描述: 跑馬燈的移動速度,數字越大移動越快 預設值: 0.07 |
方法說明:
檢視原始碼 JavaScript
1 2 | // 使用 liScroll 效果 $(selector).liScroll([settings]); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="li-scroller.css" /> <script type="text/javascript" src="jquery.columnfilters.js"></script> <script type="text/javascript"> $(function(){ // 設定 travelocity $("ul#ticker01").liScroll({ travelocity: 0.1 }); }); </script> <body> <ul id="ticker01"> <li> <span>2008/05/19</span> <a href="http://blog.xuite.net/abgne/diary1/17213997" target="_blank">AU3 - 移動無標題列視窗</a> </li> <li> <span>2008/05/17</span> <a href="http://blog.xuite.net/abgne/diary1/15669132" target="_blank">最終幻想掛機程式 beta 5 <2008/05/17 修正驗證碼判斷></a> </li> <li> <span>2008/05/16</span> <a href="http://blog.xuite.net/abgne/diary1/16865018" target="_blank">jQuery - HotKeys 0.5</a> </li> </ul> </body> |
附註:
在使用時,請遵循著 UL > LI > IMG 的架構來放置各種 HTML 元素。