当鼠标略过某个区块的时候，该区块会放大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>