JQuery zoom插件学习

jquery zoom是一款图片放大插件，经常用在商城商品页面里。

使用JQuery zoom插件，除了需要引入JQuery.js外，还要引入JQuery.zoom.js文件及jqzoom.css文件

下面是要操作的图片节点

最后加上初始化的js代码，不出意外就成了

$(document).ready(function(){
    $(".jqzoom").jqueryzoom();
});

但事情总不会这么顺利，这个问题害我忙活了半天，搞的我还以为jquery.zoom.js文件有错呢，结果把整个js文件研究了一遍，好在代码不多，用chrome调试运行一遍还是能看的懂得。

问题是这样的，当放大镜放大图片时，应该在原来的图像旁边创建一个div显示，可到我这里，这个div却偏离了原图几百个像素，图片在左上角，放大后却跑到了右下角，也就是这个div的left和top偏了几百个像素。所以我就把代码研究了一遍，最后发现没有问题，而且我也大概知道了问题的原因，下面的图是我根据代码的意思画的图

这个是jquery.zoom.js里面用来为这个div定位的代码

var imageLeft = $(this).offset().left;
var imageTop = $(this).offset().top;
console.log("imageLeft:"+imageLeft+",imageTop:"+imageTop);

var imageWidth = $(this).children('img').get(0).offsetWidth;
var imageHeight = $(this).children('img').get(0).offsetHeight;



noalt = $(this).children("img").attr("alt");

var bigimage = $(this).children("img").attr("jqimg");

$(this).children("img").attr("alt", '');

if ($("div.zoomdiv").get().length == 0) {

    $(this).after("
");


    $(this).append("
 
");

}


if (settings.position == "right") {
    if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) {

        leftpos = imageLeft - settings.offset - settings.xzoom;

    } else {

        leftpos = imageLeft + imageWidth + settings.offset; //452 = 
    }
} else {
    leftpos = imageLeft - settings.xzoom - settings.offset;
    if (leftpos < 0) {

        leftpos = imageLeft + imageWidth + settings.offset;

    }

}

$("div.zoomdiv").css({
    top: imageTop,
    left: leftpos
});

我想对前端比较熟悉的应该知道问题出在哪里了，没错，*这个div定位应该相对浏览器才行，而我这里却是相对于父节点*。那接下来就简单多了，原来，在我这个div的祖先节点存在多个position:relative，要知道对于position：absolute；的节点，父元素如果出现relative，则是相对于父元素进行定位，否则才是相对于浏览器原点。所以为只要将这些relative去掉，或者覆盖掉，就没有问题了

转载于:https://www.cnblogs.com/lvyahui/p/4255962.html