放大鏡並不是一個難以實現的效果, 只是因為牽涉到一些精確的數值計算, 顯得比較繁瑣. 在未來的一段日子, 我會不定期地寫關於 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 獲取鼠標位置了吧?)
留個課後思考題, 當鏡片帶邊框時, 如何保證邊框不影響鏡片移動時的精確度?