<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>延时弹窗广告实例</title>
    <style type="text/css">
        body{
            background:url("../images/bodybackground.jpg") no-repeat;
        }
        #box{
            width:auto;
            height:auto;
            position:relative;
            display:none;
        }
        #img1{
            width:30px;
            height:30px;
            position:absolute;
            left:280px;
            top:2px
        }
    </style>
</head>
<body>
<div id="box">
    <img src="../images/colse.jpg" alt="#" id="img1">   <!--这个是关闭按钮-->
    <img src="../images/tanchuang.jpg" alt="#" id="img2">   <!--漂浮的广告-->
</div>

<script type="text/javascript">
    var oBox = document.getElementById("box");
    var oImg1 = document.getElementById("img1");
    setTimeout(function(){
        oBox.style.display = 'inline-block';
    },3000);
    oImg1.onclick = function(){
        oBox.style.display = 'none';
    }
</script>
</body>
</html>

 

 

效果:

 

posted on 2016-04-20 22:21  冬刻忆  阅读(268)  评论(0)    收藏  举报