Shuffle Letters 是一個很類似 Airport 的文字顯示效果,可以把每一個英數字都進行指定次數的轉換後才顯示出正確的。
套件名稱:Shuffle Letters
套件網址:1.0
作者網站:http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
套件網址:N/A
發佈日期:2011-09-10
檔案大小:2.80 KB
檔案下載:jquery.shuffleLetters.js
參數選項說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | step(選填) 描述: 每一個字元要改變幾次 預設值: 8 fps(選填) 描述: 每秒影格速度(1000毫秒/fps) 預設值: 25 text(選填) 描述: 可用來當做要產生 Shuffle Letters 效果的內容 預設值: "" callback(選填) 描述: 當執行完 Shuffle Letters 效果後要執行的函式 預設值: function(){} |
方法說明:
檢視原始碼 JavaScript
1 2 | // 在指定的區塊中切換顯示圖片動畫 $(selector).animateImages(path, count, interval); |
使用範例:
檢視原始碼 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.shuffleLetters.js"></script> <style type="text/css"> #container{ color: #555; font-size: 58px; margin: 0 auto; padding: 200px 0 100px; width: 650px; font-family: 'Open Sans Condensed',sans-serif; } </style> <script type="text/javascript"> $(function(){ // 先取得 #container 及 #userText var container = $("#container"), userText = $('#userText'); // 讓 #container 開始進行 Shuffle Letters 效果 container.shuffleLetters(); // 當在輸入框中按下各種按鍵時 userText.keypress(function(e){ // 如果按下 Enter 時 if(e.keyCode == 13){ // 讓 #container 開始進行 Shuffle Letters 效果 // 文字來源從輸入框中取得 container.shuffleLetters({ text: userText.val() }); userText.val(''); } }); // 4 秒後自動顯示 'Test it for yourself!' setTimeout(function(){ container.shuffleLetters({ text: 'Test it for yourself!' }); },4000); }); </script> <body> <label for="userText">輸入英文/數字字句後按下 Enter:<input type="text" id="userText" /></label> <div id="container">This is a Tutorialzine Demo!</div> </body> |