每當打開淘寶，天貓等pc端時，看到心儀的物品時，點擊圖片時，便呈現出放大的效果。在沒有去理解分析它的原理時，感覺非常的神奇，當真正地去接觸，也是非常好理解。如下圖展示所見：
很是常見，在此記載一下，畢竟好記性不如爛筆頭。
主要事件:
- onmouseout
- onmouseover
- onmousemove
這種實現也是比較簡單的，代碼如下所示：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大鏡</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 #demo { 13 display: block; 14 width: 400px; 15 height: 255px; 16 margin: 50px; 17 position: relative; 18 border: 1px solid #ccc; 19 } 20 21 #small-box { 22 position: relative; 23 z-index: 1; 24 } 25 26 #float-box { 27 display: none; 28 width: 160px; 29 height: 120px; 30 position: absolute; 31 background: #ffffcc; 32 border: 1px solid #ccc; 33 filter: alpha(opacity=50); 34 opacity: 0.5; 35 } 36 37 #mark { 38 position: absolute; 39 display: block; 40 width: 400px; 41 height: 255px; 42 background-color: #fff; 43 filter: alpha(opacity=0); 44 opacity: 0; 45 z-index: 10; 46 } 47 48 #big-box { 49 display: none; 50 position: absolute; 51 top: 0; 52 left: 460px; 53 width: 400px; 54 height: 300px; 55 overflow: hidden; 56 border: 1px solid #ccc; 57 z-index: 1;; 58 } 59 60 #big-box img { 61 position: absolute; 62 z-index: 5 63 } 64 </style> 65 <script> 66 67 //頁面加載完畢后執行 68 window.onload = function () { 69 70 var objDemo = document.getElementById("demo"); 71 var objSmallBox = document.getElementById("small-box"); 72 var objMark = document.getElementById("mark"); 73 var objFloatBox = document.getElementById("float-box"); 74 var objBigBox = document.getElementById("big-box"); 75 var objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; 76 77 objMark.onmouseover = function () { 78 objFloatBox.style.display = "block" 79 objBigBox.style.display = "block" 80 } 81 82 objMark.onmouseout = function () { 83 objFloatBox.style.display = "none" 84 objBigBox.style.display = "none" 85 } 86 87 objMark.onmousemove = function (ev) { 88 89 var _event = ev || window.event; //兼容多個瀏覽器的event參數模式 90 91 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; 92 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; 93 94 //設置邊界處理，防止移出小圖片 95 if (left < 0) { 96 left = 0; 97 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) { 98 left = objMark.offsetWidth - objFloatBox.offsetWidth; 99 } 100 101 if (top < 0) { 102 top = 0; 103 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) { 104 top = objMark.offsetHeight - objFloatBox.offsetHeight; 105 106 } 107 108 objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相對什么而言 109 objFloatBox.style.top = top + "px"; 110 111 //求其比值 112 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); 113 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight); 114 115 //方向相反，小圖片鼠標移動方向與大圖片相反，故而是負值 116 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; 117 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px"; 118 } 119 } 120 </script> 121 </head> 122 <body> 123 <div id="demo"> 124 <div id="small-box"> 125 <div id="mark"></div> 126 <div id="float-box"></div> 127 <img src="img/macbook-small.jpg"/> 128 </div> 129 <div id="big-box"> 130 <img src="img/macbook-big.jpg"/> 131 </div> 132 </div> 133 </body> 134 </html>
這里面需要區別的是offsetLeft和style.left：
offsetLeft 獲取的是相對於父對象的左邊距；left 獲取或設置相對於 具有定位屬性(position定義為relative)的父對象 的左邊距；
- offsetLeft返回的數值，而style.left則返回的是字符串；
- offsetLeft是只讀的，style.left可讀寫的；
- style.left的值需要事先定義，否則取到的值為空，而且必須要定義在html里，如果寫在樣式里面，是取不出它的值的；
這是這個代碼的要點之一，另外一個就是去要計算其比例。根據對應比例，進行代碼的顯示。
另外，小圖片和大圖片的顯示，移動方向是相反的，所以比例前面會乘以一個負號。這個需要注意。