jquery如何实现百叶窗效果

这篇文章将为大家详细讲解有关jquery如何实现百叶窗效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

大概思路：

一个div（宽度为800px），里面包含ul和li，li的宽高分别设置为560px，300px（li里的图片也是这个宽高）。li设置绝对定位，div设置相对定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不动画的时候，每个li宽高为160px。（800/5=160 div的宽度/图片个数）
动画的时候，被鼠标进入的li宽高为560px，300px，把图片完全显示出来。其他未被鼠标进入的图片，宽度为（800-560）/4=160px
当鼠标出去box框的话，各个图片回复最初的位置。

代码：

运行结果：

代码简化：

关于"jquery如何实现百叶窗效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。