[原创]淘宝面试题 position实现三个div布局 


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <style type="text/css">
 8         body {
 9             margin: 0;
10             padding: 0;
11         }
12 
13         div {
14             background: #CCCCCC;
15             position: absolute;
16         }
17 
18         #first {
19             width: 100px;
20             height: 150px;
21         }
22 
23         #second {
24             top: 160px;
25             width: 100px;
26             height: 150px;
27         }
28 
29         #third {
30             width: 200px;
31             height: 310px;
32             left: 110px;
33         }
34     </style>
35     <script type="text/javascript">
36         window.onload = function () {
37             function zoom(id, x, y) { // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
38                 debugger;
39                 var obj = document.getElementById(id); // 获取元素对象值
40                 var dW = obj.clientWidth; // 获取元素宽度
41                 var dH = obj.clientHeight; // 获取元素高度
42                 //var oTop=obj.offsetTop;
43                 //var oLeft=obj.offsetLeft;
44                 obj.onmouseover = function () { // 鼠标移入
45                     this.style.width = dW * x + "px"; // 横向缩放
46                     this.style.height = dH * y + "px"; // 纵向缩放
47                     this.style.backgroundColor = "#f00"; // 设置调试背景
48                     this.style.zIndex = 1; // 设置z轴优先
49                 }
50                 obj.onmouseout = function () { // 鼠标移出，设回默认值
51                     this.style.width = "";
52                     this.style.height = "";
53                     this.style.padding = "";
54                     this.style.backgroundColor = "";
55                     this.style.zIndex = "";
56                 }
57             }
58             zoom("first", 1.25, 1.25);
59             zoom("second", 1.25, 1.25);
60             zoom("third", 1.25, 1.25);
61 
62         }
63       
64     </script>
65 
66 </head>
67 <body>
68     <div id="first">div1</div>
69     <div id="second">div2</div>
70     <div id="third">div3</div>
71 
72 </body>
73 </html>

 

posted @ 2015-04-02 18:02  杨博客  阅读(331)  评论(0)    收藏  举报