jquery实现百叶窗效果
今天试着用jq写了下图片百叶窗效果，就是鼠标经过那张图，那张图显示，其他图片缩小~
最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单：
基本原理就是，将图片都绝对定位到盒子里，然后分别定位，平分整个盒子，图片就会显示一种层叠效果了（本案例是通过left值控制位置）；然后通过jq控制，当鼠标经过某张图片的时候这张图片完全显示（即left值进行变化），其他图片的left值也进行相应的改变。
文字描述起来很难懂的样子，先上html和css布局效果
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
div{
width:420px;
height:186px;
border:2pxsolid#ccc;
overflow:hidden;
position:relative;
margin:100pxauto;
}
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>
<divclass="box">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<imgsrc="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<imgsrc="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<imgsrc="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
</body>
</html>
布局很简单，接下来就是jq控制各个图片相对位置的变化了。
起始位置：五张图片的left值在css已经写好，就是平分了整个盒子的宽度；
鼠标经过时候：经过的那张图片完全显示，即占据宽度280px（图片的宽度是280px），剩余的宽度是 （盒子宽度-280px）/剩余的图片数量，根据所得值确定各个图片的终止位置，left值；
感觉自己说的好复杂，先看下鼠标讲过某张图的时候的动画效果：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
div{
width:420px;
height:186px;
border:2pxsolid#ccc;
overflow:hidden;
position:relative;
margin:100pxauto;
}
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>
<divclass="box">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<imgsrc="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<imgsrc="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<imgsrc="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
<scripttype="text/javascript">
varlefts;
varidx;
$("img").each(function(){
$(this).mouseenter(function(e){
idx=$(this).index();
lefts=idx*35;
//当前图片的变化
$(this).stop(true).animate({"left":idx*35},1000);
});
})
当前图片能够愉快的玩耍了，接下来的重点就是其余图片怎么运动。
此时，我们可以把剩余的图片分成左右两部分，用jq的 ":lt()"和":gt()"方法写出剩余部分的效果。这里有一个小小的坑，自己也是绕了半天，最后还是别人提醒的才绕出来。
以当前图片左侧动画效果为例，最开始我是这么写的
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
div{
width:420px;
height:186px;
border:2pxsolid#ccc;
overflow:hidden;
position:relative;
margin:100pxauto;
}
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>
<divclass="box">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<imgsrc="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<imgsrc="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<imgsrc="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
<scripttype="text/javascript">
varlefts;
varidx;
$("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，再把变量引入进去即可。
因此更改后如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
div{
width:420px;
height:186px;
border:2pxsolid#ccc;
overflow:hidden;
position:relative;
margin:100pxauto;
}
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>
<divclass="box">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<imgsrc="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<imgsrc="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<imgsrc="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
<scripttype="text/javascript">
varlefts;
varidx;
varimgL;
$("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)
})
});
})
这样奇迹就出现了~~同样的道理，右侧也是同样的方法。
最终代码如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
div{
width:420px;
height:186px;
border:2pxsolid#ccc;
overflow:hidden;
position:relative;
margin:100pxauto;
}
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>
<divclass="box">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<imgsrc="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<imgsrc="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<imgsrc="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<imgsrc="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
<scripttype="text/javascript">
//精简之后的方法
varlefts;
varidx;
varimgL;
varimgR;
$("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>
鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。
方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~
ps：图片不知道怎么加上来，稍后看下再改吧。欢迎各位加入交流学习前端群466039913
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！