位置: 编程技术 - 正文
推荐整理分享原生js实现百叶窗效果及原理介绍(js原生实现call),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js原生方法大全,用原生js实现过什么功能,原生js教程,原生js操作dom,原生js实现promise,原生js实现promise.all,原生js实现promise,原生js实现promise.all,内容如对您有帮助,希望把文章链接给更多的朋友!
百叶窗大家都见过吧!如图:
原理:
如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden;黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是要改变它的top值从而获得变化!(右上角多余块与本图无关)
布局分析:
注意top值得变化!默认top=0时候,显示的“一楼上铺”,当top=-px时候,li的子元素 上移px,这时候显示的内容就为“一楼下铺”注意p元素的包裹层div
JS分析:1、要开多个定时器来达到效果2、执行相反方向3、执行多组运动4、累加产生错落感5、产生时间间隔的动画JS代码如下:
下载地址:js实现百叶窗效果
标签: js原生实现call
本文链接地址:https://www.jiuchutong.com/biancheng/373427.html 转载请保留说明!友情链接: 武汉网站建设