标签：nload off length size pos onload lang tle offset
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#box{
width:366px;
margin: 100px auto;
border: 1px solid #ccc;
height:366px;
}
#ul li{
width:100px;
height:100px;
border:1px solid #000;
background: #ccc;
margin: 10px;
float:left;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oUl=document.getElementById(‘ul‘);
var aLi=oUl.children;
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]={
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
}
};
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‘;
};
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
move(this,{width:200,height:200,marginLeft:-50,marginTop:-50});
this.style.zIndex=‘999‘;
};
aLi[i].onmouseout=function(){
move(this,{width:100,height:100,margin:0});
this.style.zIndex=‘0‘;
}
}
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
标签：nload off length size pos onload lang tle offset
原文地址：http://www.cnblogs.com/HUANGRONG888/p/6052504.html
