因为实现方式比较简单,直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现手风琴效果</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.wrapper{
width:600px;
margin:20px auto;
padding: 20px;
overflow: hidden;
}
.imgs{
float: left;
height:200px;
width:20%;
}
.img-1{
background:#ccc url(images/1.jpg) no-repeat;
}
.img-2{
background:#ccc url(images/2.jpg) no-repeat;
}
.img-3{
background:#ccc url(images/3.jpg) no-repeat;
}
.img-4{
background:#ccc url(images/4.jpg) no-repeat;
}
.img-5{
background:#ccc url(images/5.jpg) no-repeat;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="imgs img-1"></li>
<li class="imgs img-2"></li>
<li class="imgs img-3"></li>
<li class="imgs img-4"></li>
<li class="imgs img-5"></li>
</ul>
<script src="jquery-2.0.3.min.js"></script>
<script>
(function(){
$(".imgs").mouseover(function(){
$(".imgs").not($(this)).animate({
width:"15%"
},600);
$(this).animate({
width:"40%"
},600);
}).mouseout(function(){
$(".imgs").animate({
width:"20%"
},600);
});
})();
</script>
</body>
</html>
效果图:
特别说明:
当鼠标移动到图片上时,动画效果分别是15%和40%,15%*4+40%=100%。
但是当容器的大小和图片大小不是整除的时候,这一块动画效果就应该设置的总和小于100%,具体多少,还要根据相除的余数决定。
这一块这样设计是因为:当启动动画效果时,百分比是16位小数点,然后相加可能会大于100%,就会出现浮动问题。
详见下图:
为了更好地对比,设置.wrapper{width:640px;},看一下效果图: