描述：默认状态为几张图片显示最左侧的部分，其余部分处于隐藏的状态。鼠标经过的时候，经过的图片变宽，其余图片全部变窄。由于变窄的速度大于图片变宽的速度。所有最右面的一个图片，在默认状态的时候，显示的要比其他部分少一些。鼠标离开之后，图片回复为原来的样子。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>
<style>
*{
padding:0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 1150px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li{
width: 240px;
height: 400px;
float: left;
}
div ul{
width: 1300px;
}
</style>
<script>
window.onload = function () {
//获取相关元素
var div = document.getElementsByTagName("div")[0];
var liArr = div .getElementsByTagName("li");
//循环为每一个li添加背景图片以及添加鼠标经过事件
for(var i = 0;i<liArr.length;i++){
//添加图片
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//添加鼠标经过时候的事件
liArr[i].onmouseover = function () {
for (var j = 0;j<liArr.length;j++){
animate(liArr[j],{"width":100});
}
animate(this,{"width":800})
}
}
//鼠标离开之后，复原
div.onmouseout = function () {
for(var j=0;j<liArr.length;j++){
//引用框架实现宽度变窄
animate(liArr[j],{"width":240});
}
}
function animate(ele,json,fn) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var bool = true;
for(var k in json){
var leader = parseInt(getStyle(ele,k)) || 0;
var step = (json[k] - leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
ele.style[k] = leader + "px";
}
if(json[k] !== leader){
bool = false;
}
if(bool){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},1);
}
function getStyle(ele,attr) {
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
}
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>