不知道各位有沒有看過 hTC 在行動裝置上的那個會翻頁的時鐘呢？jquery-counter 雖然目前是一個倒數計時的外掛套件，但作者利用了類似影格的方式來改變圖片，進而產生翻頁的錯覺效果。
套件名稱：jquery-counter
套件網址：N/A
作者網站：http://code.google.com/p/jquery-countdown/
套件網址：N/A
發佈日期：2009-07-10
檔案大小：3.53 KB
檔案下載：jquery.countdown.js
HTML 屬性說明：
套件名稱：jquery-counter
套件網址：N/A
作者網站：http://code.google.com/p/jquery-countdown/
套件網址：N/A
發佈日期：2009-07-10
檔案大小：3.53 KB
檔案下載：jquery.countdown.js
HTML 屬性說明：
檢視原始碼 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 | stepTime(選填) 描述： 圖片切換的移動速度(1000毫秒 = 1秒)；如果是使用作者提供的圖片的話，建議不要變更此值 預設值： 60 format(選填) 描述： 時間格式 預設值： "dd:hh:mm:ss" startTime(選填) 描述： 要倒數的時間；這邊填入的時間格式要跟 format 的一樣才行 預設值： "01:12:32:55" digitImages(選填) 描述： 每一秒是包含幾格圖片；如果是使用作者提供的圖片的話，建議不要變更此值 預設值： 6 digitWidth(選填) 描述： 數字圖片的寬度(以一小格為主) 預設值： 53 digitHeight(選填) 描述： 數字圖片的高度(以一小格為主) 預設值： 77 timerEnd(選填) 描述： 當時間到了要執行的動作 預設值： function(){} image(選填) 描述： 數字圖片的來源 預設值： "digits.png" |
方法說明：
檢視原始碼 JavaScript
1 2 | // 在指定的區塊上進行倒數計時效果 $(selector).countdown(userOptions); |
使用範例：
檢視原始碼 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.countdown.js"></script> <style type="text/css"> #counter2 { margin-top: 50px; clear: both; } .cntSeparator { /* 分隔符號的樣式 */ font-size: 54px; margin: 10px 7px; color: #000; } .desc { margin: 7px 3px; } .desc div { float: left; font-family: Arial; width: 70px; margin-right: 65px; font-size: 13px; font-weight: bold; color: #000; } </style> <script type="text/javascript"> $(function(){ // 第一個倒數計時, 圖片來源為 images/digits.png // 倒數時間為 1 天 12 小時又 12 分 0 秒 $('#counter').countdown({ image: 'images/digits.png', startTime: '01:12:12:00' }); // 第二個倒數計時, 圖片來源為 images/digits.png // 倒數時間為 1 分 30 秒, 格式為 mm分ss秒 // 時間到了跳出對話方塊 $('#counter2').countdown({ image: 'images/digits.png', startTime: '01分30秒', timerEnd: function(){ alert('時間終了!'); }, format: 'mm分ss秒' }); }); </script> <body> <div id="counter"></div> <div class="desc"> <div>日</div> <div>時</div> <div>分</div> <div>秒</div> </div> <div id="counter2"></div> <div class="desc"> <div>分</div> <div>秒</div> </div> </body> |
