支持ie8的时分秒的html,兼容ie8的漂亮jQuery计时器插件
C3counter.js是一款兼容ie8的漂亮jQuery計時器插件。該jQuery計時器插件使用圖片作為計時器的背景，通過jquery來驅動時間計時動畫，整體效果非常漂亮。
使用方法
在頁面中引入jquery和C3counter.js文件。
HTML結構
該jQuery計時器的HTLM結構如下：
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 });
回調函數
在倒計時結束之后，可以觸發一個回調函數，來執行你需要的操作。
C3Counter("counter", {
timerEnd: function(){
// 執行你的代碼
},
});
配置參數
該jquery計時器插件的可用配置參數如下：
C3Counter("counter", {
digitImages: 1,
digitWidth: 30,
digitHeight: 44,
digitSlide : true,
digitSlideTime : 200,
digitImageHeight : 484,
digitAnimationHeight : 44,
image: "digits.png",
updateInterval : 1000
});
總結
以上是生活随笔為你收集整理的支持ie8的时分秒的html,兼容ie8的漂亮jQuery计时器插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 索引能不能太多,mysql索
- 下一篇： 信息学奥赛一本通 1181：整数奇偶排序