位置: 编程技术 - 正文
原生js实现百叶窗效果及原理介绍(js原生实现call)
编辑：rootadmin推荐整理分享原生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代码防止SQL注入的方法(超简单)(前端防止sql注入)