簡單的網頁廣告特效
阿新 • • 發佈：2017-08-19
posit ack margin timeout lose color align size 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; 22position: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>
簡單的網頁廣告特效