一道Web前端面试题 DIV放大

http://jsfiddle.net/dtdxrk/BExYy/embedded/result/

当鼠标略过某个区块的时候，该区块会放大，并且其他的区块仍然固定不动。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>一道Web前端面试题 DIV放大</title>
 6 <style>
 7 body { margin:0;padding:0; font-size:30px; text-align:center; font-family:"Courier New", Courier, monospace;}
 8 #a{ width:100px;  background-color:#ececec; margin-bottom:10px;height:100px;line-height:100px;}
 9 #b{ width:100px;  background-color:#ececec;height:100px;line-height:100px; }
10 #c{position: absolute; top:0; left:110px;width:300px; height:210px;line-height:210px; background-color:#ececec;}
11 #copy { display:none;position: absolute; border:2px solid #999; background-color:#ececec; width:100px; height:200px;}
12 </style>
13 </head>
14 
15 <body>
16 <div id="a">A</div>
17 <div id="b">B</div>
18 <div id="c">C</div>
19 <div id="copy"></div>
20 
21 <script>
22 var div = document.getElementsByTagName('div');
23 
24 for (var i = 0; i < div.length-1; i++){    //遍历div
25     div[i].onmouseover = showDIV;
26 }
27 
28 function showDIV(){
29     
30     var copy = document.getElementById('copy');
31         copy.innerHTML = this.innerHTML;
32         copy.style.display = 'block';
33         copy.style.height  = 1.5*this.offsetHeight + 'px';
34         copy.style.lineHeight  = 1.5*this.offsetHeight + 'px';
35         copy.style.width  = 1.5*this.offsetWidth + 'px';
36         copy.style.fontSize  = 60 + 'px';
37         copy.style.top  = this.offsetTop + 'px';
38         copy.style.left  = this.offsetLeft + 'px';
39         
40     copy.onmouseout = function(){
41         this.style.display = 'none';
42     }
43 }
44 
45 </script>
46 
47 </body>
48 </html>