jquery計算div偏移量和基於鼠標位置的邊界

Question

我正在適應圖像縮放演示（my CodePen for it is here），但我遇到的一個障礙是試圖阻止放大鏡.mag-glass div移動時它擊中.magnify父div的邊緣（如在this MagicZoom example中）。 .mag-glass位置在CSS中根據與.magnify相關的鼠標偏移位置設置。我只是有麻煩搞清楚究竟是如何if語句周圍

$("#"+div+" .mag-glass").css({left: px, top: py}); 

需要去讓.mag玻璃沒有延伸外.magnify。

感謝您的幫助，我發現鼠標定位是Javascript中最令人沮喪的部分！

Answer 1

只要檢查它是否不超過家長div的所有4個邊界（如果有的話，重置它）。舉例：

var offset_top = $('.mag-glass').offset().top, 
    bound_top = $('#img1').offset().top; 

if (offset_top < bound_top) { 
    $('.mag-glass').css('top', bound_top); 
} 

對每個邊界（例如左，右，上，下）執行此操作。