采用css实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>squeezebox</title>
<style>
*{
padding:0;
margin:0;
}
body{
padding:100px;
}
li{
list-style-type:none;
}
ul{
600px;
height:250px;
overflow:hidden;
background-color: red;
}
li{
float:left;
120px;
-webkit-transition: width 0.5s ease-out;
-moz-transition: width 0.5s ease-out;
-ms-transition: width 0.5s ease-out;
-o-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
li:hover{
400px;
}
ul:hover li:not(:hover){
50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold2.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold3.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold4.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.elongstatic.com/index/ifold/20150120_ifold5.jpg" alt=""/></a></li>
</ul>
</body>
</html>