百叶窗大家都见过吧！如图:
原理:
如图所示，空心格子就好比是每个li，给它设定相对定位属性，设置overflow:hidden；黑块为li子元素，高度为li的2倍，设置absolute属性，我们正是要改变它的top值从而获得变化！(右上角多余块与本图无关)
布局分析：
注意top值得变化！默认top=0时候，显示的“一楼上铺”，当top=-40px时候，li的子元素 上移40px，这时候显示的内容就为“一楼下铺”注意p元素的包裹层div
JS分析：
1、要开多个定时器来达到效果
2、执行相反方向
3、执行多组运动
4、累加产生错落感
5、产生时间间隔的动画
JS代码如下：
下载地址：js实现百叶窗效果
以上就是本文的全部内容，希望对大家学习实现js百叶窗效果有所帮助。
以上就是原生js实现百叶窗效果及原理介绍的详细内容，更多请关注本站其它相关文章！
