原生js实现网页顶部自动下拉/收缩广告效果
知识要点
1.实现原理：
通过递归改变div的高度值达到缓慢下拉的效果。
2.一共分为3个步骤我写了三个函数
第一个show()函数（下拉）：初始值高度h<300的话h+5 反之return退出停止，调用setTimeout方法30毫秒执行一次+5
第二个hide()函数（收回）：只是高度的判断不同高度h-5反之return退出停止，调用setTimeout方法30毫秒执行一次-5
第三个dd()函数（再次弹出）：这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0，实现原理与第一个函数一样，
并且一定要在第二个函数（收回）执行后再执行
完整代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear:both;float:none;height:0;overflow:hidden;}
#container{width:600px;margin:0auto;}
p{line-height:28px;}
.hidden{background:#E6E6E6;text-align:center;height:auto;overflow:hidden;}
.show{background:#808080;text-align:center;height:0;overflow:hidden;}
</style>
</head>
<body>
<divid="container">
<divclass="hidden"id="hid"><p>广告图</p></div>
<divclass="show"id="sho"><p>哈哈哈哈改装成功</p></div>
</div>
<scripttype="text/javascript">
window.onload=functionaa(){
show();
setTimeout("hide()",3000);
}
varh=0;
varhid=document.getElementById("hid");
varsho=document.getElementById("sho");
functionshow(){
if(h<300){
h+=5;
hid.style.height=h+"px";
}else{
return;
}
setTimeout("show()",30);
}
functionhide(){
if(h>0){
h-=5;
hid.style.height=h+"px";
}else{
dd();
return;
}
setTimeout("hide()",30);
}
vara=0;
functiondd(){
if(a<60){
a+=1;
sho.style.height=a+"px";
}else{
return;
}
setTimeout("dd()",30);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！