<强>知识要点强>
通过递归改变div的高度值达到缓慢下拉的效果。
<强>第一个显示()函数(下拉):强>初始值高度h<300年的话h + 5,反之返回退出停止,调用setTimeout方法30毫秒执行一次+ 5
<强>第二个隐藏()函数(收回):强>只是高度的判断不同高度h-5反之返回退出停止,调用setTimeout方法30毫秒执行一次5
<强>第三个dd()函数(再次弹出):强>这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理与第一个函数一样,
并且一定要在第二个函数(收回)执行后再执行
<强>完整代码强>
& lt; !DOCTYPE html> & lt; html lang=癳n”比; & lt; head> & lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比; & lt; title> demo & lt; style> 身体,h2、h3 h4、h5、类推,h7,人力资源,p,引用,dl, dt, dd, ul, ol,李前,形式,自定义字段,传说,按钮,输入,文本区域,th, td{保证金:0;填充:0;} h2、h3 h4、h5、类推,h7{字体大小:100%;} 地址、引用、dfn em, var{字体样式:正常;} 代码,kbd,前桑普{字体类型:快递新、快递等宽字体;} ul、ol {list-style:没有;} 一个{文字修饰:没有;} 答:悬停{文字修饰:没有;} 一口{vertical-align: text-top;} 子{vertical-align: text-bottom;} 传说{颜色:# 000;} 自定义字段,img{边界:0;} 按钮,输入,选择、textarea{字体大小:100%;} 表{border-collapse:崩溃;border-spacing: 0;} .clear{清楚:两个;浮动:没有,高度:0;溢出:隐藏;} #{容器宽度:600 px;保证金:0汽车;} p{行高:28 px;} .hidden{背景:# E6E6E6;text-align:中心;高度:汽车;溢出:隐藏;} ,告诉{背景:# 808080;text-align:中心;高度:0;溢出:隐藏;} & lt;/style> & lt;/head> & lt; body> & lt; div id=叭萜鳌北? & lt; div类="隐藏" id=安亍痹? lt; p>广告图& lt;/p> & lt;/div> & lt; div类="显示" id=吧痰辍弊4? lt; p>哈哈哈哈改装成功& lt;/p> & lt;/div> & lt;/div> & lt;脚本type=" text/javascript祝辞 窗口。onload=函数aa () { 显示(); setTimeout(“隐藏()",3000); } var h=0; var藏=. getelementbyid(“藏”); var商店=. getelementbyid(“商店”); 函数显示(){ 如果(h<300) { h +=5; hid.style.height=h +“px”; 其他}{ 返回; } setTimeout (“()”, 30); } 函数隐藏(){ 如果(h> 0) { h -=5; hid.style.height=h +“px”; 其他}{ dd (); 返回; } setTimeout(“隐藏()”,30); } var=0; 函数dd () { 如果(a<60) { +=1; sho.style.height=a +“px”; 其他}{ 返回; } setTimeout (dd (), 30); } & lt;/script> & lt;/body> & lt;/html> >之前以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持。
原生js实现网页顶部自动下拉/收缩广告效果