简单的网页广告特效
Posted shuangcherry
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的网页广告特效相关的知识，希望对你有一定的参考价值。
为了练习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>
以上是关于简单的网页广告特效的主要内容，如果未能解决你的问题，请参考以下文章