jquery 手风琴

原生js:

window.onload=function(){
                var oBox=document.getElementById("box");
                var aLi=oBox.getElementsByTagName('li');
                var w=30;
                for(var i=1;i<aLi.length;i++){
                    aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
                }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onmouseover=function(){
                        for(var i=0;i<aLi.length;i++){
                            if(i<=this.index){
                                move(aLi[i],{left:i*w},{time:500,easing:'ease-out'});
                            }else{move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w},{time:500,easing:'ease-out'});}
                        }
                    };
                }
            };

 

jquery:

 

$(function(){
               var w=30;
               $('li').each(function(index,element){   //index指的是for循环的i,element指的是this
                    if(index>0){$('li')[index].style.left=$('#box')[0].offsetWidth-($('li').length-index)*w+'px';}
               });  
                $('li').each(function(index,element){
                   $('li').mouseover(function(){
                       if(index<=$(this).index()){   //小于等于当前移入的li下标
                           move($('li')[index],{left:index*w},{time:500,easing:'ease-out'});
                       }else{move($('li')[index],{left:$('#box')[0].offsetWidth-($('li').length-index)*w},{time:500,easing:'ease-out'});}
                   });
                 });
          });