<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> html,body,ul{margin:0;padding:0;} ul{width:366px;position:relative;background:#666;height:500px;margin:0 auto;} li{width:100px;height:100px;border:1px solid #000;background:#CCC;float:left;margin:10px;display:inline;list-style:none;z-index:1;} </style> <script src='perfectMove.js'></script> <script> window.onload = function(){ var ul = document.getElementsByTagName('ul')[0]; var arrLi = ul.getElementsByTagName('li'); /*布局转换*/ var minZindex = 2; for(var i=0;i<arrLi.length;i++){ arrLi[i].style.left = arrLi[i].offsetLeft+'px'; arrLi[i].style.top = arrLi[i].offsetTop+'px'; } //这个不能偷懒，和上面不能合成一个循环 for(var i=0;i<arrLi.length;i++){ arrLi[i].style.position = 'absolute'; arrLi[i].style.margin = 0;/*offset的时候已经赋值过margin*/ } /*图片的缩放*/ for(var i=0;i<arrLi.length;i++){ arrLi[i].onmouseover = function(){ this.style.zIndex = minZindex++; perfectStartMove(this,{200,height:200,marginLeft:-50,marginTop:-50});/*margin = （变大的宽-原来的）/2*/ }; arrLi[i].onmouseout = function(){ perfectStartMove(this,{100,height:100,marginLeft:0,marginTop:0}); }; } }; </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>