<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;
//把原来的坐标全部存起来 用来后面转定位用
var aPos=[];
for(var i=0; i<aLi.length; i++){
aPos[i]={left:aLi[i].offsetLeft, top:aLi[i].offsetTop};
}
//布局转化
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++){
//鼠标移入时
aLi[i].onmouseover=function(){
// 放大的width/height自己定
this.style.width=200+'px';
this.style.height=200+'px';
//margin一定要负的(width/height 的一半)
this.style.marginLeft=-50+'px';
this.style.marginTop=-50+'px';
//把层级提高 （也可以在外面定一个变量每次移入的时候++）
this.style.zIndex=2;
};
//鼠标移出时 (回复到原来的样式就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
网友评论