JQuery 动画之 广告

html页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <script src="../jquery.js"></script>
    <script>
        function time() {
            $t = $("#t").text();
            if ($t!=0) {
                $("#t").text($t - 1); //广告时间减 1
                $hh = setTimeout("time()", 1000); //递归，反复调用自己
            }
            else {
                $(".banner").hide();  
                $(".btn").show();  //隐藏图片
                $("#t").text(6);
                clearTimeout($hh);     //清除定时间
            }
        }
        $(function () {
            $(".btn").bind("click", function () {
                $(this).hide();
                $(".banner").show();
                time();
            });
            $(".close").bind("click", function () {
                $(".banner").hide();
                $(".btn").show();
                $("#t").html(6);
                clearTimeout($hh);
            });
        });
    </script>
</head>
<body>
    <div class="banner">
        <div class="ad"><a><img src="img/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>

css:

body {
    font-family:微软雅黑;
    font-size:12px;
}
.banner{
    width:564px;
    height:361px;
    margin:20px auto;
    position:relative;/*让子元素做定位*/
    display:none;
}
.ad_time{
    width:110px;
    height:25px;
    background-color:#000;
    color:#fff;
    position:absolute;   /*让倒计时在图片上方显示*/
    top:0;
    left:0;
    text-align:center;
    line-height:25px;
}
.ad_time span{
    font-weight:bold; color:#cc0; padding:0 5px;
}
.close{
     width:49px;
    height:20px;
    position:absolute;
    top:0;
    right:0;
    background:url(../img/close.png) no-repeat;  //给关闭添加背景图片
    cursor:pointer;
}
.btn{
    width:100px;
    height:30px;
    border:1px solid #ddd;
    background-color:#eee;
    text-align:center;
    line-height:30px;
    margin:20px auto;
    cursor:pointer;
}

 

 

posted @ 2016-10-13 21:43  Sealee  阅读(280)  评论(0)  编辑  收藏  举报