<style>
*{ margin: 0; padding: 0; list-style: none;}
ul{ width:366px; height:366px; padding:10px; border:1px solid #000; margin: 50px auto;}
ul li{ width:100px; height:100px; background: #ccc; float: left; margin: 10px; border: 1px solid #000;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
//把原來的坐標(biāo)全部存起來 用來后面轉(zhuǎn)定位用
var aPos=[];
for(var i=0; i<aLi.length; i++){
aPos[i]={left:aLi[i].offsetLeft, top:aLi[i].offsetTop};
}
//布局轉(zhuǎn)化
for(var i=0; i<aLi.length; i++){
aLi[i].style.left=aPos[i].left+'px';
aLi[i].style.top=aPos[i].top+'px';
aLi[i].style.position='absolute';
aLi[i].style.margin=0;
}
for(var i=0; i<aLi.length; i++){
//鼠標(biāo)移入時(shí)
aLi[i].onmouseover=function(){
// 放大的width/height自己定
this.style.width=200+'px';
this.style.height=200+'px';
//margin一定要負(fù)的(width/height 的一半)
this.style.marginLeft=-50+'px';
this.style.marginTop=-50+'px';
//把層級(jí)提高 （也可以在外面定一個(gè)變量每次移入的時(shí)候++）
this.style.zIndex=2;
};
//鼠標(biāo)移出時(shí) (回復(fù)到原來的樣式就OK了)
aLi[i].onmouseout=function(){
this.style.width=100+'px';
this.style.height=100+'px';
this.style.margin=0;
this.style.zIndex=0;
};
}
};
</script>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
GIF2.gif
