jQuery图片版倒计时特效(提取自金山快盘)

说明：

一个jQuery版的倒计时特效代码。提取自金山快盘15G实用型空间一年期10元的活动。代码下载地址在文末。

效果：

[本地演示(图片版)] [本地演示(文字版)]

代码：

<style>
/* 文字版的倒计时可以删除这些样式，文字版在示例中不需要样式 */
.count-down{
	position: absolute;
	top: 45px;
	left: 20px;
}
.count-down span{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 32px;
	height: 60px;
	background-image: url(num.png);
	background-repeat: no-repeat;
}
.count-down .colon{
	width: 20px;
	background-position: -8px 0;
}
.count-down .dot{
	width: 20px;
	background-position: -8px -655px;
}
.count-down .colon-show{
	background-position: -8px 0;
}
.count-down .num-0{
	background-position: 0 -60px;
}
.count-down .num-1{
	background-position: 0 -120px;
}
.count-down .num-2{
	background-position: 0 -180px;
}
.count-down .num-3{
	background-position: 0 -240px;
}
.count-down .num-4{
	background-position: 0 -300px;
}
.count-down .num-5{
	background-position: 0 -360px;
}
.count-down .num-6{
	background-position: 0 -420px;
}
.count-down .num-7{
	background-position: 0 -480px;
}
.count-down .num-8{
	background-position: 0 -540px;
}
.count-down .num-9{
	background-position: 0 -600px;
}
</style>
<div class="count-down" data-end="2013-7-19 18:00:00"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="count-down.js"></script>
<script>
	$(function(){
		var end = $('.count-down').attr('data-end');
		if (end) {
			CountDown.start(new Date(end));
		}
	})
</script>

下载代码：

图片版：count-down.7z

文字版：到示例中提取文字版的 count-down.js 替换掉即可。

＜完＞