首页 » 前端 » jQuery » 正文

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

发布者:站点默认
2013/07/18 浏览数(2,213) 分类:jQuery jQuery图片版倒计时特效(提取自金山快盘)已关闭评论

说明:

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

效果:

count-down-demo-screenshot

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

代码:

<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 替换掉即可。

<完>

点击返回顶部
  1. 留言
  2. 联系方式