<!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,{width:200,height:200,marginLeft:-50,marginTop:-50});/*margin = （變大的寬-原來的）/2*/ }; arrLi[i].onmouseout = function(){ perfectStartMove(this,{width: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>