C3counter.js是一款兼容ie8的漂亮jQuery計時器插件。該jQuery計時器插件使用圖片作為計時器的背景，通過jquery來驅(qū)動時間計時動畫，整體效果非常漂亮。

使用方法

在頁面中引入jquery和C3counter.js文件。

HTML結(jié)構(gòu)

該jQuery計時器的HTLM結(jié)構(gòu)如下：

CSS樣式

計時器的主要CSS樣式如下：

.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計時器插件。

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

回調(diào)函數(shù)

在倒計時結(jié)束之后，可以觸發(fā)一個回調(diào)函數(shù)，來執(zhí)行你需要的操作。

C3Counter("counter", {

timerEnd: function(){

// 執(zhí)行你的代碼

},

});

配置參數(shù)

該jquery計時器插件的可用配置參數(shù)如下：

C3Counter("counter", {

digitImages: 1,

digitWidth: 30,

digitHeight: 44,

digitSlide : true,

digitSlideTime : 200,

digitImageHeight : 484,

digitAnimationHeight : 44,

image: "digits.png",

updateInterval : 1000

});

總結(jié)

以上是生活随笔為你收集整理的支持ie8的时分秒的html,兼容ie8的漂亮jQuery计时器插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。