今天试着用jq写了下图片百叶窗效果，就是鼠标经过那张图，那张图显示，其他图片缩小~
最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单：
基本原理就是，将图片都绝对定位到盒子里，然后分别定位，平分整个盒子，图片就会显示一种层叠效果了（本案例是通过left值控制位置）；然后通过jq控制，当鼠标经过某张图片的时候这张图片完全显示（即left值进行变化），其他图片的left值也进行相应的改变。
文字描述起来很难懂的样子，先上html和css布局效果
Document div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto; } img{ border: none; display: block; position: absolute; top: 0; } img:nth-of-type(1){ left: 0; } img:nth-of-type(2){ left: 84px; } img:nth-of-type(3){ left: 168px; } img:nth-of-type(4){ left: 252px; } img:nth-of-type(5){ left: 336px; }
布局很简单，接下来就是jq控制各个图片相对位置的变化了。
起始位置：五张图片的 left 值在css已经写好，就是平分了整个盒子的宽度；
鼠标经过时候：经过的那张图片完全显示，即占据宽度280px（图片的宽度是280px），剩余的宽度是 （盒子宽度-280px）/剩余的图片数量，根据所得值确定各个图片的终止位置，left值；
感觉自己说的好复杂，先看下鼠标讲过某张图的时候的动画效果：
Document div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto; } img{ border: none; display: block; position: absolute; top: 0; } img:nth-of-type(1){ left: 0; } img:nth-of-type(2){ left: 84px; } img:nth-of-type(3){ left: 168px; } img:nth-of-type(4){ left: 252px; } img:nth-of-type(5){ left: 336px; }
鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。
方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~
ps： 图片不知道怎么加上来，稍后看下再改吧。欢迎各位加入交流学习前端群 466039913
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
以上就是jquery实现百叶窗效果的详细内容，更多请关注本站其它相关文章！
