Pages

Subscribe:

Ads 468x60px

Labels

2015年6月12日 星期五

[jQ]jquery-counter

不知道各位有沒有看過 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 屬性說明：
檢視原始碼 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>
範例 1
張貼者： hivenson 於 下午2:37
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)