Dynamo 會在指定的區塊中加入一組新的文字內容區塊,然後動態的輪播切換顯示。不過它的用法比較特別一點,只要在 HTML 的元素中設定屬性就可以。
套件名稱:Dynamo
套件網址:N/A
作者網站:http://jordanscales.com/dynamo/
套件網址:N/A
發佈日期:2012-05-16
檔案大小:2.12 KB
檔案下載:dynamo.js
HTML 屬性說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | data-lines(選填) 描述: 要用來切換顯示的文字,每一組文字用逗號隔開(原始的文字也會自動被包含進去) 預設值: 無 data-speed(選填) 描述: 每一組文字的切換速度(1000毫秒 = 1秒) 預設值: 350 data-delay(選填) 描述: 每一組文字的輪播速度(1000毫秒 = 1秒) 預設值: 3000 data-center(選填) 描述: 若設為 true 時,則文字在 dynamo 中會置中 預設值: false |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的元素套用 Dynamo 效果 $(selector).dynamo(); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="dynamo.js"></script> <script type="text/javascript"> $(function(){ // 套用 dynamo 效果 $('.dynamo').dynamo(); }); </script> <body> <p>我喜歡 <span class="dynamo" data-lines="Evernote,Google Docs,Google Maps" data-center="true">Dropbox</span> 提供的服務。</p> </body> |