这篇文章主要介绍了jquery怎样实现百叶窗效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单：
基本原理就是，将图片都绝对定位到盒子里，然后分别定位，平分整个盒子，图片就会显示一种层叠效果了（本案例是通过left值控制位置）；然后通过jq控制，当鼠标经过某张图片的时候这张图片完全显示（即left值进行变化），其他图片的left值也进行相应的改变。
文字描述起来很难懂的样子，先上html和css布局效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">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;}</style><div class="box"> <img src="/file/upload/202210/19/i53nfxbsgaw.jpg"> <img src="/file/upload/202210/19/qtjide5zixs.jpg"> <img src="/file/upload/202210/19/ubmmqaamagp.jpg"> <img src="/file/upload/202210/19/ecjcfxdfo04.jpg"> <img src="/file/upload/202210/19/yte25clxtt1.jpg"></div></body></html>布局很简单，接下来就是jq控制各个图片相对位置的变化了。
起始位置：五张图片的 left 值在css已经写好，就是平分了整个盒子的宽度；
鼠标经过时候：经过的那张图片完全显示，即占据宽度280px（图片的宽度是280px），剩余的宽度是 （盒子宽度-280px）/剩余的图片数量，根据所得值确定各个图片的终止位置，left值；
感觉自己说的好复杂，先看下鼠标讲过某张图的时候的动画效果：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">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;}</style><div class="box"> <img src="/file/upload/202210/19/i53nfxbsgaw.jpg"> <img src="/file/upload/202210/19/qtjide5zixs.jpg"> <img src="/file/upload/202210/19/ubmmqaamagp.jpg"> <img src="/file/upload/202210/19/ecjcfxdfo04.jpg"> <img src="/file/upload/202210/19/yte25clxtt1.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); lefts = idx * 35; //当前图片的变化 $(this).stop(true).animate({"left" : idx * 35}, 1000); });})当前图片能够愉快的玩耍了，接下来的重点就是其余图片怎么运动。
此时，我们可以把剩余的图片分成左右两部分，用jq 的 ":lt()" 和 ":gt()"方法写出剩余部分的效果。这里有一个小小的坑，自己也是绕了半天，最后还是别人提醒的才绕出来。
以当前图片左侧动画效果为例，最开始我是这么写的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">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;}</style><div class="box"> <img src="/file/upload/202210/19/i53nfxbsgaw.jpg"> <img src="/file/upload/202210/19/qtjide5zixs.jpg"> <img src="/file/upload/202210/19/ubmmqaamagp.jpg"> <img src="/file/upload/202210/19/ecjcfxdfo04.jpg"> <img src="/file/upload/202210/19/yte25clxtt1.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); lefts = idx * 35; //当前图片的变化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(“img:lt( idx )“).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})看上去没有什么错误，见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹，原因就是 $(“img:lt( idx )“) 这种写法，里面的idx已经不是变量了，所以无法获取当前的 idx 值，我们可以在外面定义一个变量，同时用 + 连接 lt 和变量 idx，再把变量引入进去即可。
因此更改后如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">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;}</style><div class="box"> <img src="/file/upload/202210/19/i53nfxbsgaw.jpg"> <img src="/file/upload/202210/19/qtjide5zixs.jpg"> <img src="/file/upload/202210/19/ubmmqaamagp.jpg"> <img src="/file/upload/202210/19/ecjcfxdfo04.jpg"> <img src="/file/upload/202210/19/yte25clxtt1.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;var imgL; $("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" lefts = idx * 35; //当前图片的变化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})这样奇迹就出现了~~ 同样的道理，右侧也是同样的方法。
最终代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ width:280px; height:186px; 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;}</style><div class="box"> <img src="/file/upload/202210/19/i53nfxbsgaw.jpg"> <img src="/file/upload/202210/19/qtjide5zixs.jpg"> <img src="/file/upload/202210/19/ubmmqaamagp.jpg"> <img src="/file/upload/202210/19/ecjcfxdfo04.jpg"> <img src="/file/upload/202210/19/yte25clxtt1.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">//精简之后的方法var lefts;var idx;var imgL; var imgR;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" //获取当前左侧的所有图片，如果直接用 $("img:lt(idx)")，idx会被当做字符串，获取不到对应的值 imgR = "img:gt(" + idx + ")" //获取当前右侧的所有图片 lefts = idx * 35; //当前图片的变化 $(this).stop(true).animate({"left" : idx * 35}, 1000); //左侧图片的变化 $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) //右侧图片的变化 $(imgR).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000) }) });})$("img").each(function(){ $(this).mouseleave(function(){ $("img").each(function(){ $(this).stop(true).animate({"left" : ($(this).index())*84}, 1000); }) });})</script></body></html>感谢你能够认真阅读完这篇文章，希望小编分享的“jquery怎样实现百叶窗效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
