jQuery贴片倒计时广告特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery贴片倒计时广告特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>{title}</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js" language="javascript"></script>
<script type="text/javascript" src="js/lrtk.js" language="javascript"></script>
</head>
<body>
<!--代码开始-->
<div class="box">
	<div class="ad"><a href="#" target="_blank"><img src="images/ad.jpg" /></a></div>
	<div class="ad_time">广告时间还剩<span id="t">6</span>秒</div>
	<div class="close"></div>
</div>
<div class="btn">点击显示广告</div>
<!--代码结束-->
</body>
</html>

JS代码(lrtk.js):

// JavaScript Documentfunction lxfEndtime(){
	$t=$('#t').html();
	if($t!=0){
	$('#t').html($t-1);
	$i=setTimeout("lxfEndtime()",1000);
}
else{
	$('.box').hide();
	$('.btn').show();
	$('#t').html(6);
	$('.ad_time').css({
	'width':'554px','height':'351px'}
);
	clearTimeout($i);
}
}
;
	$(document).ready(function(){
	$('.btn').live('click',function(){
	$('.box').show();
	$(this).hide();
	$('.ad_time').animate({
	width:110,height:18}
,'slow');
	lxfEndtime();
}
)$('.close').click(function(){
	$('.box').hide();
	$('.btn').show();
	$('#t').html(6);
	$('.ad_time').css({
	'width':'554px','height':'351px'}
);
	clearTimeout($i);
}
)}
);

CSS代码(style.css):

/* 转载请保留版权信息：懒人图库 www.lanrentuku.com */
*{padding:0;margin:0;font-size:12px;}
ol,ul,li{list-style:none}
img{border:none}
.box{width:564px;height:361px;margin:20px auto;position:relative;display:none;}
.ad_time{width:554px;height:351px;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;padding:5px;position:absolute;top:0;left:0;color:#fff;}
.ad_time span{font-weight:bold;color:#cc0;padding:0 5px;}
.close{width:49px;height:20px;background:url(../images/close.png) no-repeat;position:absolute;top:0;right:0;cursor:pointer;}
.btn{width:100px;height:30px;background:#eee;border:1px solid #ddd;font:normal 12px/30px '微软雅黑';text-align:center;margin:20px auto;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)