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

更新時間：2011年05月09日 23:38:28 作者：

JavaScript 放大鏡是我成為前端后寫的第一個組件, 從中學(xué)到了很多東西. 現(xiàn)在已經(jīng)過去超過半年, 我希望能在自己仍有印象的時候, 整理和重新思考其中的一些處理方法, 將它改進(jìn), 并將這些想法寫出來

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

縮略圖和鏡片組成的 DOM 結(jié)構(gòu)如下.

復(fù)制代碼代碼如下:

 
<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> 

我在縮略圖容器中放置圖片和鏡片節(jié)點, 以縮略圖容器作為相對位置參考, 在觸發(fā) mousemove 事件時修改鏡片的位置. 換個說法, 我們要解決的問題是, 算出鏡片左上角的在縮略圖容器中的位置. 計算鏡片位移的 JavaScript 代碼如下.

復(fù)制代碼代碼如下:

 
/** 
* 獲取鏡片在放大目標(biāo)元素上的位置 
* @param ev 觸發(fā)的事件 
* @param thumb 縮略圖對象 
* @param glass 鏡片對象 
* @return x:鏡片在放大目標(biāo)元素上的橫向位置, y:鏡片在放大目標(biāo)元素上的縱向位置 
*/ 
function getGlassOffset(ev, thumb, glass) { 
var offset = { 
left:0, 
top:0 
}; 

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

// 光標(biāo)橫向位置 
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; 
} 

// 光標(biāo)縱向位置 
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; 
} 

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

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

您可能感興趣的文章: