一道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>
