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

沒有留言:

張貼留言