正常的手风琴右侧会出现一闪一闪的，这里采用了欺骗用户大法。
其实一共6块，最后一块溢出隐藏了，所以不会一闪一闪的。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 800px;
height: 400px;
margin: 100px auto;
border: 1px solid black;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 1000px;
height: 100%;
}
li {
width: 160px;
height: 100%;
float: left;
}
li:nth-child(1) {
background-color: aqua;
}
li:nth-child(2) {
background-color: rebeccapurple;
}
li:nth-child(3) {
background-color: red;
}
li:nth-child(4) {
background-color: yellow;
}
li:nth-child(5) {
background-color: yellowgreen;
}
li:nth-child(6) {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
function easaymove(ele, target) {
var timer = ele.getAttribute("timer");
clearInterval(timer);
timer = setInterval(function() {
var c = parseInt(getComputedStyle(ele)["width"]); //获取定位的left，不带单位的
var step = Math.ceil(Math.abs(parseInt(target) - c) / 10); //px逻辑像素，没有小数的
if (c > parseInt(target)) {
step = -step;
}
ele.style.width = c + step + "px"; //不要忘记加单位
if (c == parseInt(target)) {
clearInterval(timer);
}
}, 20);
ele.setAttribute("timer", timer);
}
var lis = document.getElementsByTagName("li");
var box = document.getElementsByClassName("box")[0];
Array.prototype.forEach.call(lis, function(value, index) {
value.setAttribute("timer", "");
value.onmouseenter = function() {
Array.prototype.forEach.call(lis, function(vv, ii) {
if (vv == value) {
easaymove(vv, 480);
} else {
easaymove(vv, 80);
}
});
};
});
box.onmouseleave = function() {
Array.prototype.forEach.call(lis, function(vv) {
easaymove(vv, 160);
});
}
</script>
</body>
</html>