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

Question

我正在改编一个图像缩放的演示(my CodePen for it is here)，但是我遇到的一个障碍是试图阻止放大镜.mag-glass div在命中.magnify父div的边缘时移动(就像在this MagicZoom example中一样)。在CSS中，..mag glass位置是根据鼠标相对于.magnify的偏移位置设置的。我只是弄不清楚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);
}

对每个边界(例如，左、右、上、下)执行此操作。