一个简单的手风琴效果

.type-wrapper{ width:690px; height:84px; border:1px solid #8fb841; background:#edf6dc; margin:28px auto;}
.type { width:690px; height:84px; overflow:hidden;}
.type li{ position:relative; float:left; width:84px; height:84px; overflow:hidden; zoom:1;}
.type span{ display:block; float:left; width:84px; height:84px; background:url(images/spr-type-ico2.png) no-repeat 0 0; cursor:pointer; zoom:1; z-index:10;}
.type div{ position:absolute; left:84px; width:164px; height:64px; padding:10px;}
.type .nav1{ background-position: 0 0;}
.type .nav2{ background-position:-84px 0;}
.type .nav3{ background-position:-168px 0;} 
.type .nav4{ background-position:-252px 0;} 
.type .nav5{ background-position:-336px 0;} 
.type .nav6{ background-position:-420px 0;}  

.type li.current .nav1{ background-position:0 -89px;}
.type li.current .nav2{ background-position:-84px -89px;}
.type li.current .nav3{ background-position:-168px -89px;} 
.type li.current .nav4{ background-position:-252px -89px;} 
.type li.current .nav5{ background-position:-336px -89px;} 
.type li.current .nav6{ background-position:-420px -89px;} 

<div class="type-wrapper">
    <ul class="type" id="type">
        <li style="width:270px;" class="current">
            <span class="nav1"></span>
            <div>火锅 川菜 自助 西餐 日本料理</div>
        </li>
        <li>
            <span class="nav2"></span>
            <div>2</div>
        </li>
        <li>
            <span class="nav3"></span>
            <div>3</div>
        </li>
        <li>
            <span class="nav4"></span>
            <div>4</div>
        </li>
        <li>
            <span class="nav5"></span>
            <div>5</div>
        </li>
        <li>
            <span class="nav6"></span>
            <div>6</div>
        </li>
    </ul> 
</div>

window.οnlοad=function(){
	var type=document.getElementById('type');
	var list=type.getElementsByTagName('li');
	var i=0;
	var timer=null;
	
	for(i=0; i<list.length; i++){
		
		list[i].οnmοuseοver=function(){
		
			var _this=this;
			
			clearInterval(timer);

			timer=setInterval(function(){
				
				var sum=0;
	
				for(i=0; i<list.length; i++){
					
					var speed=(84-list[i].offsetWidth)/9;
					speed=Math.floor(speed);
					
					list[i].style.width=list[i].offsetWidth+speed+'px';
					list[i].className='';
				}
				
				for(i=0;i<list.length;i++)
				{
					if(list[i]!=_this)
					{
						sum+=list[i].offsetWidth;
					}
				}
				
				_this.style.width=type.offsetWidth-sum+'px';
				_this.className='current';
				
			},30);
			
		};
	}
};