原生js实现网页顶部自动下拉/收缩广告效果

前端之家收集整理的这篇文章主要介绍了原生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,实现原理与第一个函数一样,

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

完整代码

demo
哈哈哈哈改装成功

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

猜你在找的JavaScript相关文章