快捷導(dǎo)航

JavaScript 放大鏡移動(dòng)鏡片效果代碼

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

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

放大鏡并不是一個(gè)難以實(shí)現(xiàn)的效果, 只是因?yàn)闋可娴揭恍┚_的數(shù)值計(jì)算, 顯得比較繁瑣. 在未來(lái)的一段日子, 我會(huì)不定期地寫關(guān)于 JavaScript 放大鏡系列的文章, 每次講一個(gè)點(diǎn), 由點(diǎn)及面, 最后完成整個(gè)效果.
本次我們先了解如何在縮略圖上移動(dòng)鏡片. (這是 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é)點(diǎn), 以縮略圖容器作為相對(duì)位置參考, 在觸發(fā) mousemove 事件時(shí)修改鏡片的位置. 換個(gè)說(shuō)法, 我們要解決的問(wèn)題是, 算出鏡片左上角的在縮略圖容器中的位置. 計(jì)算鏡片位移的 JavaScript 代碼如下.

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

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

// 偏移量 
var thumbOffset = getCumulativeOffset(thumb); 
// 鼠標(biāo)在頁(yè)面上的位置 
var mousePoint = getMousePoint(ev); 
// 鏡片實(shí)際尺寸 
var glassSize = getSize(glass); 
// 簡(jiǎn)縮圖實(shí)際尺寸 
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)鏡片在容器外, 將鏡片靠邊. 全部代碼請(qǐng)窺視 DEMO. (知道我為何上一篇寫通過(guò) JS 獲取鼠標(biāo)位置了吧?)

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

您可能感興趣的文章: