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>fu荏鱿胫协nction 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、查看效果。
