一道Web前端面试题 DIV放大

效果预览:

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

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

一道Web前端面试题 DIV放大

 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>

你可能感兴趣的:(web前端)