Rumah > Artikel > hujung hadapan web > 网页广告特效代码分享

网页广告特效代码分享

巴扎黑asal: 2017-08-21 09:59:371722semak imbas

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

为了练习javascript，做了一个简单的demo，实现的是广告从顶部慢慢拉出到最大，然后停留2s，再收缩到比较小且可以关闭的广告特效。图片可以替换为任意其他的图片。

代码如下

<!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>

Atas ialah kandungan terperinci 网页广告特效代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript ES6的迭代器与生成器介绍Artikel seterusnya：JavaScript教程之注册页面表单校验

Artikel berkaitan

Lihat lagi