DIV非偏移放大

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5 
 6     <script src="JQuery插件/jquery-1.4.2.js" type="text/javascript"></script>
 7 
 8     <style type="text/css">
 9         #div1
10         {
11             background: #58C3E0;
12             width: 100px;
13             height: 250px;
14             line-height: 10px;
15             float: left;
16         }
17         #div2
18         {
19             background: #58C3E0;
20             width: 100px;
21             height: 100px;
22             margin: 0 0 0 110px;
23         }
24         #div3
25         {
26             background: #58C3E0;
27             width: 100px;
28             height: 140px;
29             line-height: 10px;
30             margin: 10px 0 0 110px;
31         }
32         #temp
33         {
34             display: none;
35             background: #00EBC0;
36             position: absolute;
37             border: soild 1px black;
38             width: 100px;
39             height: 200px;
40         }
41     </style>
42 
43     <script type="text/javascript">
44         function EventInit() {
45             var divs = document.getElementsByTagName("div");
46             for (var i = 0; i < divs.length - 1; i++) {
47                 divs[i].onmouseover = showdiv;
48 
49             }
50 
51             function showdiv() {
52                 var temp = document.getElementById("temp");
53                 temp.innerHTML = this.innerHTML;
54                 temp.style.display = 'block';
55                 temp.style.height = 1.5 * this.offsetHeight + "px"
56                 temp.style.width = 1.5 * this.offsetWidth + "px";
57                 temp.style.top = this.offsetTop + "px";
58                 temp.style.left = this.offsetLeft + "px";
59 
60                 temp.onmouseout = function() {
61                     this.style.display = "none";
62                 }
63             }
64         }
65          
66     </script>
67 
68 </head>
69 <body onload="EventInit()">
70     <div id="div1">
71     </div>
72     <div id="div2">
73     </div>
74     <div id="div3">
75     </div>
76     <div id="temp">
77     </div>
78 </body>
79 </html>

 

原文地址:https://www.cnblogs.com/seazeg/p/2533027.html