微信小程序开发问_原生js完成网页顶部主动下拉

2021-01-12 14:50 jianzhan
原生js实现网页顶部自动下拉/收缩广告效果       本文主要介绍了原生js实现网页顶部自动下拉/收缩广告效果的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧

通过递归改变div的高度值达到缓慢下拉的效果。

2.一共分为3个步骤我写了三个函数

第一个show()函数(下拉):初始值高度h 300的话 h+5  反之return退出停止,调用setTimeout方法30毫秒执行一次+5

第二个hide()函数(收回):只是高度的判断不同高度h-5 反之return退出停止,调用setTimeout方法30毫秒执行一次-5

第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理与第一个函数一样,

并且一定要在第二个函数(收回)执行后再执行

完整代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta http-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:courier new,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-colla凡科抠图e:colla凡科抠图e;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#container{width: 600px; margin: 0 auto;}
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 
 div id="container" 
 div id="hid" p 广告图 /p /div 
 div id="sho" p 哈哈哈哈改装成功 /p /div 
 /div 
 script type="text/javascript" 
 window.onload=function aa(){
 show();
 setTimeout("hide()",3000);
 var h=0;
 var hid=document.getElementById("hid");
 var sho=document.getElementById("sho");
 function show(){
 if(h 300){
 h+=5;
 hid.style.height=h+"px";
 }else{
 return;
 setTimeout("show()",30);
 function hide(){
 if(h 0){
 h-=5;
 hid.style.height=h+"px";
 }else{
 dd();
 return;
 setTimeout("hide()", 30);
 var a=0;
 function dd(){
 if(a 60){
 a+=1;
 sho.style.height=a+"px";
 }else{
 return;
 setTimeout("dd()",30);
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!