zoukankan      html  css  js  c++  java
  • 一道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>
  • 相关阅读:
    SQL Server和Oracle数据库索引介绍
    ITPUB上一个Oracle面试题
    国服《巫妖王之怒》3.35冰双持新手献礼指南
    WLK奥法输出循环
    flume架构初接触
    密码校验正则表达式(java 环境)
    初学Mahout测试kmeans算法
    身份证校验(java)
    gcc 中 O选项对空函数的优化
    《肖申克的救赎》语录
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/2494583.html
Copyright © 2011-2022 走看看