手風琴實現效果js（純js實現）
這是用原生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>