Partage de code d'effets spéciaux de publicité Web-js tutoriel-php.cn

Partage de code d'effets spéciaux de publicité Web

巴扎黑

Libérer： 2017-08-21 09:59:37

original

1783 Les gens l'ont consulté

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(&#39;imgAd&#39;);
 var oad=document.getElementById(&#39;ad&#39;);
 var ocur=document.getElementById(&#39;curAd&#39;);
 var closeBtn=document.getElementById(&#39;close&#39;);
 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=&#39;none&#39;;
   closeBtn.style.display=&#39;block&#39;;
  }
 }
 closeBtn.onclick=function(){
  oad.style.display=&#39;none&#39;;
 }
 setTimeout(down,1000);
</script>
</body>
</html>

Copier après la connexion

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!