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>
