我正在调整图像变焦的演示(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中最令人沮丧的部分!
答案 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);
}
对每个边界(例如左,右,上,下)执行此操作。