原生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'});} }); }); });