使用JQuery实现对比图片的放大镜效果

HTML:

js:

 moveLeft(e) {
      let magnifyOffest = (magnifyOffest = $("#boxSonLeft").offset());
      this.getPosition(magnifyOffest, e);
    },
    moveRight(e) {
      let magnifyOffest = $("#boxSonRight").offset();
      this.getPosition(magnifyOffest, e);
    },
    getPosition(magnifyOffest, e) {
      if (
        !this.nativeWidth &&
        !this.nativeHeight &&
        !this.nativeRightW &&
        !this.nativeRightH
      ) {
        // 获取左边原始图片的宽高
        let image_obj = new Image();
        image_obj.src = this.picUrl;
        this.nativeWidth = image_obj.width;
        this.nativeHeight = image_obj.height;
        // 获取右边原始图片的宽高
        let rightImage = new Image();
        rightImage.src = this.hisImg;
        this.nativeRightW = rightImage.width;
        this.nativeRightH = rightImage.height;
      } else {
        // 左边
        let initLeft = e.pageX - magnifyOffest.left;
        let initTop = e.pageY - magnifyOffest.top;
        let px = initLeft - $(".largeLeft").width() / 2;
        let py = initTop - $(".largeLeft").height() / 2;
        //右边
        let rightLeft = e.pageX - magnifyOffest.left;
        let rightTop = e.pageY - magnifyOffest.top;
        let pxR = rightLeft - $(".largeRight").width() / 2;
        let pyR = rightTop - $(".largeRight").height() / 2;
        if (
          initLeft < $("#boxSonLeft").width() &&
          initTop < $("#boxSonLeft").height() &&
          initLeft > 0 &&
          initTop > 0 &&
          rightLeft < $("#boxSonRight").width() &&
          rightTop < $("#boxSonRight").height() &&
          rightLeft > 0 &&
          rightTop > 0
        ) {
          $(".largeLeft").fadeIn(100);
          $(".largeRight").fadeIn(100);
        } else {
          $(".largeLeft").fadeOut(100);
          $(".largeRight").fadeOut(100);
        }
        let centerX = $(".largeLeft").width() / 2;
        let centerY = $(".largeLeft").height() / 2;
        let rightX = $(".largeRight").width() / 2;
        let rightY = $(".largeRight").height() / 2;
        //计算放大倍数
        if ($(".largeLeft").is(":visible") && $(".largeRight").is(":visible")) {
          let backgroundLeft =
            Math.round(
              (initLeft / $(".leftImg").innerWidth()) * this.nativeWidth -
                centerX
            ) * -1;
          let backgroundTop =
            Math.round(
              (initTop / $(".leftImg").innerHeight()) * this.nativeHeight -
                centerY
            ) * -1;
          let bgpLeft =
            Math.round(
              (rightLeft / $(".rightImg").innerWidth()) * this.nativeRightW -
                rightX
            ) * -1;
          let bgpRight =
            Math.round(
              (rightTop / $(".rightImg").innerHeight()) * this.nativeRightH -
                rightY
            ) * -1;
          let bgp = backgroundLeft + "px" + " " + backgroundTop + "px";
          let bgpR = bgpLeft + "px" + " " + bgpRight + "px";
          // 动态修改位置属性
          $(".largeLeft").css({ left: px, top: py, backgroundPosition: bgp });
          $(".largeRight").css({
            left: pxR,
            top: pyR,
            backgroundPosition: bgpR
          });
        }
      }