jQuery根据鼠标位置计算DIV偏移量和边界

jquery calculating div offset and bounding based on mouse position

本文关键字：DIV 偏移量 边界 计算 位置 鼠标 jQuery      更新时间：2023-09-26

我正在改编图像缩放的演示（我的CodePen在这里），但我遇到的一个障碍是试图阻止放大镜.mag-glassdiv在碰到.magnify父div的边缘时移动（就像这个MagicZoom示例一样）。.mag-glass 位置在 CSS 中是根据鼠标相对于 .magnify 的偏移位置设置的。我只是无法弄清楚if语句的确切方式 

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

需要去，以便.mag-glass不会扩展到.magnify之外。

感谢您的任何帮助，我发现鼠标定位是目前 Javascript 中最令人沮丧的部分！

只需检查它是否不超过父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);
}

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

相关文章：