最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生js实现网页顶部自动下拉/收缩广告效果
时间：2017-02-10 编辑：简简单单 来源：一聚教程网
知识要点
1.实现原理：
通过递归改变div的高度值达到缓慢下拉的效果。
2.一共分为3个步骤我写了三个函数
第一个show()函数（下拉）：初始值高度h<300的话 h+5 反之return退出停止，调用setTimeout方法30毫秒执行一次+5
第二个hide()函数（收回）：只是高度的判断不同高度h-5 反之return退出停止，调用setTimeout方法30毫秒执行一次-5
第三个dd()函数（再次弹出）：这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0，实现原理与第一个函数一样，
并且一定要在第二个函数（收回）执行后再执行
| 代码如下 | 复制代码 |
广告图 哈哈哈哈改装成功
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); }
| |