經(jīng)常逛某寶可以發(fā)現(xiàn)，查看商品時(shí)都有如下的放大功能，鼠標(biāo)放到圖片上可以看到圖片的細(xì)節(jié)唤反，那么它是如何實(shí)現(xiàn)的呢凳寺？是真的將圖片放大了嗎？這篇文章就是講述這個(gè)放大器是如何實(shí)現(xiàn)的彤侍。
原理
放大器其實(shí)并不是真的將圖片放大了肠缨。
假如是原圖片放大，那么放大后勢(shì)必會(huì)出現(xiàn)一定程度的模糊盏阶，而我們平時(shí)所看到的晒奕，放大后反而更清晰了。
所以這兩張圖并不相同名斟，一個(gè)是縮略圖脑慧，另一個(gè)則是前者的高清放大版。
當(dāng)鼠標(biāo)放在左側(cè)盒子上時(shí)砰盐，使遮罩和右側(cè)“放大“圖片顯示闷袒，鼠標(biāo)移動(dòng)，帶著遮罩隨之移動(dòng)岩梳，并使右側(cè)圖片等比例進(jìn)行相應(yīng)移動(dòng)囊骤，顯示出對(duì)應(yīng)的放大后的 局部位置。
當(dāng)遮罩層向下移動(dòng)的時(shí)候冀值，這個(gè)時(shí)候大圖等比例向上移動(dòng)也物，就會(huì)顯示對(duì)應(yīng)的局部放大區(qū)域。然后把溢出的部分隱藏即可達(dá)到放大效果池摧。
放大器demo如下：
實(shí)現(xiàn)
要實(shí)現(xiàn)上面demo中的放大器焦除，首先你得準(zhǔn)備兩張圖激况，一張正常大小作彤，另一張高清放大版。
html結(jié)構(gòu)比較簡(jiǎn)單：
<div class="box1">
<img src="./Images/small.jpg">
<div class="mask"></div>
</div>
<div class="box2">
<img src="./Images/big.jpg">
</div>
css部分就不給出了乌逐，無(wú)非是給盒子設(shè)寬高竭讳，調(diào)一下邊距什么的，這里只注意一點(diǎn)：
- 左側(cè)盒子寬高和右側(cè)一定是成比例的
什么意思呢浙踢？
要使放大的區(qū)域與左側(cè)遮蓋的區(qū)域一樣绢慢，那么左右寬高需要保持相同的比例，相信這一點(diǎn)不難理解洛波。
在這里胰舆，遮罩寬高為200px，縮略圖為400px蹬挤，顯示區(qū)域?yàn)?50px缚窿，原圖為900px(上圖所畫(huà)原圖大小僅做參考)
以寬為例：
遮蓋的寬 / 縮略圖的寬 = 顯示區(qū)域的寬 / 原圖的寬。
樣式設(shè)置好了焰扳，寬高也就位了倦零，怎么讓圖片動(dòng)起來(lái)呢误续？
第一步：先讓遮罩動(dòng)起來(lái)
代碼如下：
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再減去遮罩的半寬，就得到遮罩的左側(cè)與盒子間的距離扫茅，如下圖：
（如若對(duì)pageX , offsetLeft 等不太清楚蹋嵌，可以參考：JS坐標(biāo)獲取）
再對(duì)x進(jìn)行約束，使遮罩無(wú)法移出邊框葫隙，最后將x賦值給left:
...
mask.style.left = x + "px";
mask.style.top = y + "px";
...
這樣每次鼠標(biāo)移動(dòng)就會(huì)更新遮罩的left栽烂、top值，使得遮罩移動(dòng)起來(lái)恋脚。
第二步：等比例移動(dòng)右側(cè)大圖
先求得小圖和大圖的比例關(guān)系愕鼓，再乘上x(chóng)就是大圖要移動(dòng)的距離。
...
var scale = box2.offsetHeight/mask.offsetHeight;
var xx = x*scale;
var yy = y*scale;
img.style.marginLeft = -xx + "px";
img.style.marginTop = -yy + "px";
這樣這個(gè)放大器就基本實(shí)現(xiàn)了慧起，當(dāng)鼠標(biāo)移動(dòng)時(shí)菇晃，遮罩跟隨移動(dòng)，同時(shí)右側(cè)大圖等比例移動(dòng)蚓挤，達(dá)到放大的效果磺送。
最后補(bǔ)充一個(gè)在線(xiàn)工具調(diào)整圖片尺寸，個(gè)人覺(jué)得比較方便實(shí)用灿意。
