要点：布局转化、大小变化、位置也要变化
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 * {margin:0; padding:0;} 6 li {list-style:none;} 7 #ul1 {300px; margin:100px auto; border:1px solid black; position:relative;} 8 #ul1 li {80px; height:80px; background:#CCC; float:left; margin:10px;} 9 #ul1 li img {100%; height:100%;} 10 </style> 11 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 12 <title>无标题文档</title> 13 <script type="text/javascript"> 14 function getStyle(obj, attr){ 15 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; 16 } 17 window.onload=function () 18 { 19 var oUl=document.getElementById('ul1'); 20 var aLi=oUl.getElementsByTagName('li'); 21 var iMinZindex=1; 22 var i=0; 23 24 for(i=0; i<aLi.length; i++){ 25 aLi[i].style.left = aLi[i].offsetLeft + 'px'; 26 aLi[i].style.top = aLi[i].offsetTop + 'px'; 27 } 28 for (i = 0; i < aLi.length; i++) { 29 aLi[i].style.position = 'absolute'; 30 aLi[i].style.margin = 0; 31 } 32 33 for(i=0; i<aLi.length; i++){ 34 aLi[i].index = i; 35 aLi[i].onmouseover = function(){ 36 this.style.zIndex = 10; 37 startMove(this, 160); 38 } 39 aLi[i].onmouseout = function(){ 40 this.style.zIndex = 0; 41 startMove(this, 80); 42 } 43 } 44 }; 45 46 function startMove(obj, iTarget){ 47 clearInterval(obj.timer); 48 obj.timer = setInterval(function(){ 49 doMove(obj, iTarget); 50 }, 30); 51 } 52 function doMove(obj, iTarget){ 53 var iCur = parseInt(getStyle(obj, 'width')); 54 var speed = Math.ceil((iTarget-iCur)/5); 55 56 if(iCur==iTarget){ 57 clearInterval(obj.timer); 58 }else{ 59 obj.style.width = obj.style.height = (iCur+speed)+'px'; 60 obj.style.marginLeft = obj.style.marginTop = -(iCur-80)/2+'px'; 61 } 62 } 63 64 </script> 65 </head> 66 <body> 67 <ul id="ul1"> 68 <li><img src="images/1.jpg" /></li> 69 <li><img src="images/2.jpg" /></li> 70 <li><img src="images/3.jpg" /></li> 71 <li><img src="images/4.jpg" /></li> 72 <li><img src="images/5.jpg" /></li> 73 74 <li><img src="images/6.jpg" /></li> 75 <li><img src="images/7.jpg" /></li> 76 <li><img src="images/8.jpg" /></li> 77 <li><img src="images/9.jpg" /></li> 78 </ul> 79 </body> 80 </html>