jquery根据鼠标位置计算div偏移和边界

Question

我正在调整图像变焦的演示（my CodePen for it is here）但是我遇到的一个障碍是试图阻止放大镜.mag-glass div在撞到边缘时移动.magnify父div（如this MagicZoom example中所示）。基于鼠标相对于.magnify的偏移位置，在CSS中设置.mag-glass位置。我只是弄清楚究竟如何围绕

的if语句

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

需要这么做.mag-glass不会延伸到.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);
}

对每个边界（例如左，右，上，下）执行此操作。