自制手风琴

CSS部分

.box {
	margin: 50px auto;
	width: 1150px;
	height: 400px;
	border: 1px solid #eee;
	overflow: hidden;
}
.box ul {
	list-style: none;
	width: 1300px;
}
.box ul li {
	float: left;
	heigh: 400px;
	width: 240px;
}

body部分

<div class="box" id="box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<script>
//0.获取相关元素
var box = document.getElementById("box");
var ul = document.getElementsByTagName("ul")[0];
var liArr = ul.children;
//1.遍历li元素为其添加背景图片
for(var i=0; i<liArr.length; i++){
	liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
	//2.设置Li元素滑过时的效果
	for(var j=0; j<liArr.length; j++){
		animate(liArr[j],{"width":100});
	}
	animate(this,{"width":800});
	//3.设置鼠标离开box的效果
	box.onmouseout = function(){
		for(var j=0; j<liArr.length; j++){
			animate(liArr[j],{"width":240});
		}
	}
}
//4.引用的封装的两个函数
//①函数：获取元素样式的兼容性写法
function getStyle(ele,atr){
	if(window.getComputedStyle){
		return window.getComputedStyle(ele,null)[attr];
	}
	return ele.currentStyle[attr];
}
//②函数：缓动动画封装函数
function animate(ele,json,fn){
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		var bool = true;
		for(var k in json){
			var leader = parseInt(getStyle(ele,k)) || 0;
			var step = (json[k]-leader)/10;
			step>0?Math.ceil(step):Math.florr(step);
			leader = leader+step;
			ele.style[k] = leader + "px";
			if(json[k] !== leader){
				bool = false;
			}
		}
		if(bool){
			clearInterval(ele.timer);
			if(fn){
				fn();
			}
		}
	},20)
}
</script>