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

时间:2016-04-25 22:11:56

标签: javascript jquery

我正在调整图像变焦的演示(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中最令人沮丧的部分!

1 个答案:

答案 0 :(得分:0)

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

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