兼容IE8的漂亮jQuery计时器特效插件

兼容IE8的漂亮jQuery计时器特效插件

C3counter.js是一款兼容ie8的漂亮jQuery计时器插件。该jQuery计时器插件使用图片作为计时器的背景,通过jquery来驱动时间计时动画,整体效果非常漂亮。

使用方法
在页面中引入jquery和C3counter.js文件。

1
2
<script src="js/jquery.min.js"></script>
<script src="js/videoBackground.js"></script>

HTML结构
该jQuery计时器的HTLM结构如下:

1
2
3
4
5
6
7
8
9
<div class="offerHolder">
  <a href="offlink">
    <div class="special">
      <div id="counter">
        <div id="shading"> </div>
      </div>
    </div>
  </a>
</div>

CSS样式
计时器的主要CSS样式如下:

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
.special {
  position:relative;
  float:left;
  width:840px;
  height:247px;
  background-image: url(../images/special_offer_bg.png);
  background-position: 0px 74px;
  background-repeat: no-repeat;
  margin-bottom:46px;
  cursor:pointer;
}
 
#counter {
 position:absolute;
  top:135px;
  left:279px;
  z-index:4000;
}
 
.digit-separator {
  position: relative;
  float: left;
  width: 17px;
  height: 44px;
  overflow: hidden;
  background-image: url(../images/digit_separator.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
 
.digit {
  background-image:url(../images/digits.png)
}
 
#shading {
 background-image: url(../images/sprites.png);
  background-position: 0px -396px;
  background-repeat: repeat-x;
  float: left;
  height: 44px;
  position: absolute;
  width: 291px;
  z-index:4100;
  top:0;
  left:0;
}

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery计时器插件。

1
C3Counter("counter", { startTime :257800 });

回调函数
在倒计时结束之后,可以触发一个回调函数,来执行你需要的操作。

1
2
3
4
5
C3Counter("counter", {
  timerEnd: function(){
    // 执行你的代码
  },
});

配置参数
该jquery计时器插件的可用配置参数如下:

1
2
3
4
5
6
7
8
9
10
11
C3Counter("counter", {
  digitImages: 1,
  digitWidth: 30,
  digitHeight: 44,
  digitSlide : true,
  digitSlideTime : 200,
  digitImageHeight : 484,
  digitAnimationHeight : 44,
  image: "digits.png",
  updateInterval : 1000
});

文件信息:

    1

    发表评论