html+css+jq实现广告5秒之后自动关闭特效

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<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>

4、书写css代码。

* { 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; }

5、书写并添加js代码。

<script src="js/jquery.js"></script>

<script>

function 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);

})

});

</script>

6、代码整体结构。

7、查看效果。