jquery实现百叶窗效果

今天试着用jq写了下图片百叶窗效果，就是鼠标经过那张图，那张图显示，其他图片缩小~

最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单：

基本原理就是，将图片都绝对定位到盒子里，然后分别定位，平分整个盒子，图片就会显示一种层叠效果了（本案例是通过left值控制位置）；然后通过jq控制，当鼠标经过某张图片的时候这张图片完全显示（即left值进行变化），其他图片的left值也进行相应的改变。

文字描述起来很难懂的样子，先上html和css布局效果

rush:xhtml;"> <Meta charset="UTF-8">

Box">

布局很简单，接下来就是jq控制各个图片相对位置的变化了。

起始位置：五张图片的 left 值在css已经写好，就是平分了整个盒子的宽度；

鼠标经过时候：经过的那张图片完全显示，即占据宽度280px（图片的宽度是280px），剩余的宽度是 （盒子宽度-280px）/剩余的图片数量，根据所得值确定各个图片的终止位置，left值；

感觉自己说的好复杂，先看下鼠标讲过某张图的时候的动画效果：

rush:xhtml;"> <Meta charset="UTF-8">

Box">

鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。

方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~

ps： 图片不知道怎么加上来，稍后看下再改吧。欢迎各位加入交流学习前端群 466039913

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！