这是用原生js实现的一个手风琴效果，但是当鼠标快速滑动的时候，会出现轻微的抖动效果！
<!DOCTYPE html>
<html>
<head>
<title>js实现手风琴效果</title>
<meta charset="utf-8">
<style>
body{
margin: 0;
padding: 0;
}
#box{
width: 90%;
height: 200px;
padding: 5% 5%;
overflow:hidden;
}
#box ul{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
overflow:hidden;
}
#box ul li{
width: 202px;
background: url(http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg) no-repeat center;
}
</style>
<script>
function anminte(el, obj){
clearInterval(el.timer);
el.timer = setInterval(function(){
// 设置一个标志 如果当前值 等于 目标值 则结束计时器
var flag = true;
for(var x in obj){
var current = el.offsetWidth;
var target = obj[x];
//设置一个速度
var speed = (target-current)/10;
el.style.width = speed + current + 'px';
if(current != target){
flag = false;
}
}
if(flag){
clearInterval(el.timer)
}
return false;
}, 15);
}
window.onload = function() {
var aLi = document.querySelectorAll('li');
aLi.forEach(function(val){
// 当鼠标移入的时候 把这个li变成402px 其余的变成162px
val.onmouseover = function(e) {
//保存节点指针
var _this = this;
aLi.forEach(function(val1) {
anminte(val1, {
width: 162
})
});
anminte(this, {
width: 402
})
}
// 当鼠标移出的时候 都变成202px
val.onmouseout = function(e) {
//保存节点指针
var _this = this;
aLi.forEach(function(val1) {
anminte(val1, {
width: 202
})
});
}
});
}
</script>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>