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

來源:互聯網
上載者:User

放大鏡並不是一個難以實現的效果, 只是因為牽涉到一些精確的數值計算, 顯得比較繁瑣. 在未來的一段日子, 我會不定期地寫關於 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 擷取滑鼠位置了吧?)

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.