<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #ul1{ width: 366px; margin: 0 auto; position: relative; } #ul1 li{ list-style: none; width: 100px; height: 100px; background: #ccc; border: 1px solid black; float: left; margin: 10px; z-index: 1; } </style> <script src="http://files.cnblogs.com/baixc/move.js"></script> <script> window.onload=function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var iMinZindex = 2; var i = 0; //布局转换 for(i=0;i<aLi.length;i++){ // aLi[i].innerHTML='left:'+aLi[i].offsetLeft+'<br />top:'+aLi[i].offsetTop; aLi[i].style.left=aLi[i].offsetLeft+'px'; aLi[i].style.top=aLi[i].offsetTop+'px'; }; for(i=0;i<aLi.length;i++){ aLi[i].style.position='absolute'; aLi[i].style.margin='0'; }; //加事件 for(i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ this.style.zIndex=iMinZindex++; startMove(this,{200,height:200,marginLeft:-50,marginTop:-50}); }; aLi[i].onmouseout=function(){ startMove(this,{100,height:100,marginLeft:0,marginTop:0}); }; }; }; </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>