JavaScript 放大鏡 移動鏡片效果代碼

放大鏡並不是一個難以實現的效果, 只是因為牽涉到一些精確的數值計算, 顯得比較繁瑣. 在未來的一段日子, 我會不定期地寫關於 JavaScript 放大鏡系列的文章, 每次講一個點, 由點及面, 最後完成整個效果.
本次我們先瞭解如何在縮圖上移動鏡片. (這是 DEMO)

縮圖和鏡片組成的 DOM 結構如下. 複製代碼 代碼如下:<a id="thumb" href="#">
<img src="http://img.alibaba.com/photo/291909368/Free-Shipping-Popular-ladies-shoes-Tote-shoes-paypal-accept-201001.jpg" alt="Thumbnail" />
<span id="glass"></span>
</a>

我在縮圖容器中放置圖片和鏡片節點, 以縮圖容器作為相對位置參考, 在觸發 mousemove 事件時修改鏡片的位置. 換個說法, 我們要解決的問題是, 算出鏡片左上方的在縮圖容器中的位置. 計算鏡片位移的 JavaScript 代碼如下. 複製代碼 代碼如下:/**
* 擷取鏡片在放大目標元素上的位置
* @param ev 觸發的事件
* @param thumb 縮圖對象
* @param glass 鏡片對象
* @return x:鏡片在放大目標元素上的橫向位置, y:鏡片在放大目標元素上的縱向位置
*/
function getGlassOffset(ev, thumb, glass) {
var offset = {
left:0,
top:0
};

// 位移量
var thumbOffset = getCumulativeOffset(thumb);
// 滑鼠在頁面上的位置
var mousePoint = getMousePoint(ev);
// 鏡片實際尺寸
var glassSize = getSize(glass);
// 簡縮圖實際尺寸
var thumbSize = getSize(thumb);

// 游標橫向位置
var cursorX = mousePoint.x - thumbOffset.left;
// 鏡片橫向位移量
offset.left = cursorX - glassSize.width / 2;
if(offset.left < 0) {
offset.left = 0;
} else if(offset.left > thumbSize.width - glassSize.width) {
offset.left = thumbSize.width - glassSize.width;
}

// 游標縱向位置
var cursorY = mousePoint.y - thumbOffset.top;
// 鏡片縱向位移量
offset.top = cursorY - glassSize.height / 2;
if(offset.top < 0) {
offset.top = 0;
} else if(offset.top > thumbSize.height - glassSize.height) {
offset.top = thumbSize.height - glassSize.height;
}

return offset;
}

鏡片左上方在縮圖容器中的位置 = 滑鼠位置 - 縮圖左上方位置 - 鏡片尺寸的一半
當鏡片在容器外, 將鏡片靠邊. 全部代碼請窺視 DEMO. (知道我為何上一篇寫通過 JS 擷取滑鼠位置了吧?)

留個課後思考題, 當鏡片帶邊框時, 如何保證邊框不影響鏡片移動時的精確度?