如果想讓一段文字由小到大或由大到小的等距顯示時,也許你會一字一字的設定。不過筆者是一個懶惰的人,所以會選擇像 jqIsoText 這樣的套件來做出偽等距的效果。
套件名稱:jqIsoText
套件版本:1.0
作者網站:http://workshop.rs/2010/01/jqisotext-jquery-text-effect-plugin/
套件網址:http://plugins.jquery.com/project/jqisotext
發佈日期:2010-01-06
檔案大小:1.53 KB
檔案下載:jqIsoText.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | fromSize(選填) 描述: 最小字元的尺寸 預設值: 15 toSize(選填) 描述: 最大字元的尺寸 預設值: 40 split(選填) 描述: 設為 'yes' 則會切開每一個字 預設值: 'no' |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 把指定的元素加入偽等距效果 $(selector).jqIsoText(options); // 把指定的元素加入偽等距效果 $(selector).jqisotext(options); |
使用範例:
檢視原始碼 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 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jqIsoText.js"></script> <script type="text/javascript"> $(function(){ // 預設的偽等距效果 $('.default').jqIsoText(); // 每一字切開的偽等距效果 $('.split').jqIsoText({ split: 'yes' }); // 自訂偽等距效果, 由大到小 $('.big').jqIsoText({ fromSize: 80, toSize: 8 }); }); </script> <body> <div class='default'>http://abgne.tw 男丁格爾's 脫殼玩</div> <div class='split'>http://abgne.tw 男丁格爾's 脫殼玩</div> <div class='big'>http://abgne.tw 男丁格爾's 脫殼玩</div> </body> |