<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0}
#box{
366px;
height:366px;
border:2px solid red;
margin:50px auto;
position: relative;
}
li{
100px;
height:100px;
border:1px solid #999;
background: green;
float:left;
list-style:none;
margin:10px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var aLi=oBox.children;
var arr=[];//用来存放每个li的位置;
for(var i=0;i<aLi.length;i++){
arr[i]={left:aLi[i].offsetLeft, //获取到float布局中oBox的相对左距离
top:aLi[i].offsetTop}
}
//布局转换，float--position
for(var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.left=arr[i].left+'px';
aLi[i].style.top=arr[i].top+'px';
aLi[i].style.margin=0; //定位布局后不需要margin,因为已经设定了位置;
}
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
move(this,{200,height:200,marginLeft:-50,marginTop:-50},{time:500,easing:'ease-out'});
this.style.zIndex=i++;//保证移上去的那个层级最高
}
aLi[i].onmouseout=function(){
move(this,{100,height:100,marginLeft:0,marginTop:0},{time:500,easing:'ease-out'});
}
}
}
</script>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>