效果展示：
需求：鼠标放入到li中该盒子变宽，其他盒子变窄，移开大盒子，恢复原样，手风琴效果
步骤：
1.给li添加背景
2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
3.移开大盒子，恢复原样
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li{
240px;
height: 400px;
float: left;
cursor: pointer;
}
div ul{
1300px;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="jquery1.0.0.1.js"></script>
<script>
window.onload = function(){
//需求：鼠标放入到li中该盒子变宽，其他盒子变窄，移开大盒子，恢复原样
//步骤：
//1.给li添加背景
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
//3.移开大盒子，恢复原样
var div= document.getElementsByTagName("div")[0];
var liArr = document.getElementsByTagName("li");
//1.给li添加背景
for(var i=0;i<liArr.length;i++){
//背景图片的名称是1,2,3,4,5
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
liArr[i].onmouseover = function(){
//排他思想,使鼠标放置的li变宽
for(var j=0;j<liArr.length;j++){
animate(liArr[j],{"width":100});
}
animate(this,{"width":800});
}
}
//3.移开大盒子，恢复原样
div.onmouseout = function(){
for(var j=0;j<liArr.length;j++){
animate(liArr[j],{"width":240});
}
}
}
</script>
</body>
</html>
图片啥的就不上传了，自己找几张图片，修改下大小就行了