經常逛某寶可以發現，查看商品時都有如下的放大功能，鼠標放到圖片上可以看到圖片的細節，那么它是如何實現的呢？是真的將圖片放大了嗎？這篇文章就是講述這個放大器是如何實現的。
原理
放大器其實并不是真的將圖片放大了。
假如是原圖片放大，那么放大后勢必會出現一定程度的模糊，而我們平時所看到的，放大后反而更清晰了。
所以這兩張圖并不相同，一個是縮略圖，另一個則是前者的高清放大版。
當鼠標放在左側盒子上時，使遮罩和右側“放大“圖片顯示，鼠標移動，帶著遮罩隨之移動，并使右側圖片等比例進行相應移動，顯示出對應的放大后的 局部位置。
當遮罩層向下移動的時候，這個時候大圖等比例向上移動，就會顯示對應的局部放大區域。然后把溢出的部分隱藏即可達到放大效果。
放大器demo如下：
實現
要實現上面demo中的放大器，首先你得準備兩張圖，一張正常大小，另一張高清放大版。
html結構比較簡單：
<div class="box1">
<img src="./Images/small.jpg">
<div class="mask"></div>
</div>
<div class="box2">
<img src="./Images/big.jpg">
</div>
css部分就不給出了，無非是給盒子設寬高，調一下邊距什么的，這里只注意一點：
- 左側盒子寬高和右側一定是成比例的
什么意思呢？
要使放大的區域與左側遮蓋的區域一樣，那么左右寬高需要保持相同的比例，相信這一點不難理解。
在這里，遮罩寬高為200px，縮略圖為400px，顯示區域為450px，原圖為900px(上圖所畫原圖大小僅做參考)
以寬為例：
遮蓋的寬 / 縮略圖的寬 = 顯示區域的寬 / 原圖的寬。
樣式設置好了，寬高也就位了，怎么讓圖片動起來呢？
第一步：先讓遮罩動起來
代碼如下：
box1.onmousemove = function(event) {
...
var x = event.pageX - box1.offsetLeft - mask.offsetWidth/2;
var y = event.pageY - box1.offsetTop - mask.offsetHeight/2;
...
}
用 event.pageX減去box1.offsetLeft再減去遮罩的半寬，就得到遮罩的左側與盒子間的距離，如下圖：
（如若對pageX , offsetLeft 等不太清楚，可以參考：JS坐標獲取）
再對x進行約束，使遮罩無法移出邊框，最后將x賦值給left:
...
mask.style.left = x + "px";
mask.style.top = y + "px";
...
這樣每次鼠標移動就會更新遮罩的left、top值，使得遮罩移動起來。
第二步：等比例移動右側大圖
先求得小圖和大圖的比例關系，再乘上x就是大圖要移動的距離。
...
var scale = box2.offsetHeight/mask.offsetHeight;
var xx = x*scale;
var yy = y*scale;
img.style.marginLeft = -xx + "px";
img.style.marginTop = -yy + "px";
這樣這個放大器就基本實現了，當鼠標移動時，遮罩跟隨移動，同時右側大圖等比例移動，達到放大的效果。
最后補充一個在線工具調整圖片尺寸，個人覺得比較方便實用。
