Maison > Article > interface Web > Partage de code d'effets spéciaux de publicité Web
L'éditeur suivant vous présentera un exemple simple d'effets spéciaux de publicité Web. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil
Afin de pratiquer le javascript, j'ai fait une démo simple. Ce qui est obtenu, c'est que la publicité est lentement retirée du haut jusqu'au maximum, puis reste pendant 2 secondes, puis se réduit à une taille plus petite et peut être fermé pour des effets spéciaux publicitaires. L'image peut être remplacée par n'importe quelle autre image.
Le code est le suivant
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #ad{ width:962px; display:none; margin:0 auto; overflow:hidden; position:relative; } #main{ margin:0 auto; width:960px; height:1700px; } #close{ width:20px; height:20px; position:absolute; top:0; right:0; font-size:16px; line-height:20px; text-align:center; display:none; background:yellowgreen; } </style> </head> <body> <p id="ad"> <img src="ad.png" id="imgAd" width="962" height="386"> <img src="cur.png" id="curAd" width="1199" height="68"> <span id="close">x</span> </p> <p id="main"><img src="数字商品-10-23.jpg"></p> <script> var oImgAd=document.getElementById('imgAd'); var oad=document.getElementById('ad'); var ocur=document.getElementById('curAd'); var closeBtn=document.getElementById('close'); var h=0; var maxH=oImgAd.height; var minH=ocur.height; function down() { if(h<maxH) { h+=5; oad.style.height=h+"px"; oad.style.display="block"; setTimeout(down,5); } else{ setTimeout(up,2000); } } function up(){ if(h>minH){ h-=5; oad.style.height=h+"px"; setTimeout(up,5); } else{ oImgAd.style.display='none'; closeBtn.style.display='block'; } } closeBtn.onclick=function(){ oad.style.display='none'; } setTimeout(down,1000); </script> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!