<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style type="text/css"> #img{width:330px;margin: 100px auto;position: relative;} li{float:left;width: 100px;height: 100px;background: red;margin: 10px 0 0 10px;} </style> <script type="text/javascript" src="../js/rainbow.js"></script> <script type="text/javascript"> window.onload=function(){ var aLi=document.getElementsByTagName('li'); var zIndex=1; var arr=[]; for(var i=0;i<aLi.length;i++){ //获取最原始的left top值 arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop}); } for(var i=0;i<aLi.length;i++){ aLi[i].style.left=arr[i].left+'px'; aLi[i].style.top=arr[i].top+'px'; aLi[i].style.position='absolute'; //margin值会和left top 叠加 aLi[i].style.margin=0; aLi[i].index=i; aLi[i].onmouseover=function(){ this.style.zIndex=zIndex++; this.style.background='green'; doMove(this,{200,height:200,left:arr[this.index].left-50,top:arr[this.index].top-50}); }; aLi[i].onmouseout=function(){ this.style.background='red'; doMove(this,{100,height:100,left:arr[this.index].left,top:arr[this.index].top}); } } } </script> </head> <body> <ul id="img" > <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
效果
