JS 制作放大镜对比图功能源码，拥有倍数可选功能

先看效果图：

JS文件：

//$(function ($) {

  $.fn.blowup = function (attributes,brother,beishu) {
    var $element = this;
    var $className = $element.attr("class");
     var $class1,$brother //class 与 beother 变量
    // If the target element is not an image
    if (!$element.is("img")) {
      console.log("%c Blowup.js Error: " + "%cTarget element is not an image.", 
        "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;",
        "background: #FCEBB6; color: #F07818; font-size: 17px;");
      return;
    }

    // Constants
    var $IMAGE_URL    = $element.attr("src");
    var $brotherSrc = $("."+brother).attr("src");
    var $IMAGE_WIDTH  = $element.width();
    var $IMAGE_HEIGHT = $element.height();
    var NATIVE_IMG    = new Image();
    NATIVE_IMG.src    = $element.attr("src");
    //NATIVE_IMG.width = "900";
    //NATIVE_IMG.height = "900";


    // Default attributes
    var defaults = {
      round      : true,
      width      : 200,
      height     : 200,
      background : "#FFF",
      shadow     : "0 8px 17px 0 rgba(0, 0, 0, 1)",
      border     : "6px solid #FFF",
      cursor     : true,
      zIndex     : 999999
    }

    // Update defaults with custom attributes
    var $options = $.extend(defaults, attributes);

    // Modify target image
    $element.on('dragstart', function (e) { e.preventDefault(); });
    $element.css("cursor", $options.cursor ? "crosshair" : "none");

    // Create magnification lens element
    var lens = document.createElement("div");
    lens.id = ""+$className+"BlowupLens";

    // Attack the element to the body
    $("body").append(lens);

    // Updates styles
    $blowupLens = $("#"+$className+"BlowupLens");

    $blowupLens.css({
      "position"          : "absolute",
      "visibility"        : "hidden",
      "pointer-events"    : "none",
      "zIndex"            : $options.zIndex,
      "width"             : $options.width,
      "height"            : $options.height,
      "border"            : $options.border,
      "background"        : $options.background,
      "border-radius"     : $options.round ? "50%" : "none",
      "box-shadow"        : $options.shadow,
      "background-repeat" : "no-repeat",
    });

    // Show magnification lens
    $element.mouseenter(function () {
     $class1 = $element.attr("class");
     $blowupLens = $("#"+$class1+"BlowupLens");
      $blowupLens.css("visibility", "visible");
      $brother = $("#"+brother+"BlowupLens");
      $brother.css("visibility", "visible");
    })

    // Mouse motion on image
    $element.mousemove(function (e) {
     /*$blowupLens = $("#"+$class1+"BlowupLens");
     $brother = $("#"+brother+"BlowupLens");*/
      // Lens position coordinates
      var lensX = e.pageX - $options.width / 2;
      var lensY = e.pageY - $options.height / 2;
      // Relative coordinates of image
      var relX = e.offsetX;
      var relY = e.offsetY;
      // Zoomed image coordinates
      var zoomX = -Math.floor(relX / $element.width() * NATIVE_IMG.width - $options.width / 2);
      var zoomY = -Math.floor(relY / $element.height() * NATIVE_IMG.height - $options.height / 2);
      //console.log(relX+"/"+$element.width()+"*"+ NATIVE_IMG.width );
      //console.log(zoomX);
      //console.log(zoomY);
      var bgSize;
      switch(beishu){
        case 0.5:
          zoomX = zoomX+(zoomX*beishu);
          zoomY = zoomY+(zoomY*beishu);
          bgSize =400*2.5;
          break;
        case 1.5:
          zoomX = zoomX+(zoomX*beishu);
          zoomY = zoomY+(zoomY*beishu);
          bgSize =400*3.5;
          break;
        default:
          bgSize = NATIVE_IMG.width;
      }

      // Apply styles to lens
      $blowupLens.css({
        left                  : lensX,
        top                   : lensY,
        "background-image"    : "url(" + $IMAGE_URL + ")",
        "background-position" : zoomX + " " + zoomY,
        "background-size"  : bgSize
      });
      // 此处if else 待优化逻辑。↓
      if(brother == "rightImg"){
       $brother.css({
         left                  : lensX + $element.parent().width(),
         top                   : lensY,
         "background-image"    : "url(" + $brotherSrc + ")",
         "background-position" : zoomX + " " + zoomY,
          "background-size"  : bgSize
       });
      }else if(brother == "laftImg"){
       $brother.css({
         left                  : lensX - $element.parent().width(),
         top                   : lensY,
         "background-image"    : "url(" + $brotherSrc + ")",
         "background-position" : zoomX + " " + zoomY,
          "background-size"  : bgSize
       });
      }

    })

    // 鼠标移除
    $element.mouseleave(function () {
     /*$blowupLens = $("#"+$class1+"BlowupLens");*/
      $blowupLens.css("visibility", "hidden");
      /*$brother = $("#"+brother+"BlowupLens");*/
      $brother.css("visibility", "hidden");
    })

  }
//})

HTML 文件

<!DOCTYPE html5>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <!--<link rel="stylesheet" type="text/css" href="demo.css"/>-->
 </head>
 <body>
  <div style="text-align: center;margin: 10px;">
   <button onclick="oneX()"> 一倍</button>
   <button onclick="twoX()"> 二倍</button>
   <button onclick="threeX()"> 三倍</button>
  </div>
  <div class="wrap" style="display: flex;justify-content: center;">
   <div class="left" style="margin-right: 50px;">
    <img src="http://static.sunday90.com/enlarge/images/03.jpg" width="400"  class="laftImg" />
   </div>
   <div class="right" >
    <img src="http://static.sunday90.com/enlarge/images/04.jpg" width="400" class="rightImg" />
   </div>
  </div>
 </body>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="blowup.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  $(document).ready(function(){
     $(".laftImg").blowup({},"rightImg",1);
   $(".rightImg").blowup({},"laftImg",1);
    })
  function oneX(){
   $(".laftImg").blowup({},"rightImg",1);
   $(".rightImg").blowup({},"laftImg",1);
  }
  function twoX(){
   $(".laftImg").blowup({},"rightImg",0.5);
   $(".rightImg").blowup({},"laftImg",0.5);
  }
  function threeX(){
   $(".laftImg").blowup({},"rightImg",1.5);
   $(".rightImg").blowup({},"laftImg",1.5);
  }
 </script>
</html>