网页广告的展示demo 

 为了练习javascript,做了一个简单的demo,实现的是广告从顶部慢慢拉出到最大，然后停留2s,再收缩到比较小且可以关闭的广告特效。图片可以替换为任意其他的图片。
 代码如下
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #ad{
 8             width:962px;
 9             display:none;
10             margin:0 auto;
11             overflow:hidden;
12             position:relative;
13         }
14         #main{
15             margin:0 auto;
16             width:960px;
17             height:1700px;
18         }
19         #close{
20             width:20px;
21             height:20px;
22             position:absolute;
23             top:0;
24             right:0;
25             font-size:16px;
26             line-height:20px;
27             text-align:center;
28             display:none;
29             background:yellowgreen;
30         }
31     </style>
32 
33 </head>
34 <body>
35 <div id="ad">
36     <img src="ad.png" id="imgAd" width="962" height="386">
37     <img src="cur.png" id="curAd" width="1199" height="68">
38     <span id="close">x</span>
39 </div>
40 <div id="main"><img src="数字商品-10-23.jpg"></div>
41 <script>
42     var oImgAd=document.getElementById('imgAd');
43     var oad=document.getElementById('ad');
44     var ocur=document.getElementById('curAd');
45     var closeBtn=document.getElementById('close');
46     var h=0;
47     var maxH=oImgAd.height;
48     var minH=ocur.height;
49     function down()
50     {
51         if(h<maxH)
52         {
53             h+=5;
54             oad.style.height=h+"px";
55             oad.style.display="block";
56             setTimeout(down,5);
57         }
58         else{
59             setTimeout(up,2000);
60         }
61     }
62     function up(){
63         if(h>minH){
64             h-=5;
65             oad.style.height=h+"px";
66             setTimeout(up,5);
67         }
68         else{
69             oImgAd.style.display='none';
70             closeBtn.style.display='block';
71         }
72     }
73     closeBtn.onclick=function(){
74         oad.style.display='none';
75     }
76     setTimeout(down,1000);
77 </script>
78 </body>
79 </html>

 

posted @ 2017-08-18 23:03  shuangcherry  阅读(347)  评论(0)    收藏  举报