demo 点击图片当前显示变大，其他变小
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 50px auto;
overflow: hidden;
}
.box ul{
list-style: none;
width: 4000px;
}
.box li{
float: left;
width: 200px;
}
</style>
<div class="box" id="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="JavaScript/base.js"></script> // 详情 animate() 封装
<script>
var box = document.getElementById("box");
var ul = document.getElementById("ul");
var lis = ul.children;
for(var i = 0;i<lis.length;i++){
lis[i].onmouseover = function(){
for(var j = 0;j<lis.length;j++){
animate(lis[j],{width:100})
}
animate(this,{width:600})
};
lis[i].onmouseout = function(){
for(var j = 0;j<lis.length;j++){
animate(lis[j],{width:200})
}
}
}
</script>
