jquery实现百叶窗效果(利用li的定位)

本文实例为大家分享了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框的话，各个图片回复最初的位置。

代码：

运行结果：

代码简化：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。