简单的网页广告特效实例

2019-11-19 15:44:27

字体：大中小

来源：转载

供稿：网友

为了练习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><div 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></div><div id="main"><img src="数字商品-10-23.jpg"></div><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>

以上这篇简单的网页广告特效实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：Vue内容分发slot(全面解析)

下一篇：JavaScript 完成注册页面表单校验的实例