放大镜效果

/*图片查看*/
   $.fn.magnifying = function(){
           var that = $(this),
               $imgCon = that.find('.con-fangDaIM'),//正常图片容器
               $Drag = that.find('.magnifyingBegi'),//拖动滑动容器
               $show = that.find('.magnifyingSho'),//放大镜显示区域
               $showIMg = $show.find('img'),//放大镜图片
               multiple = $show.width()/$Drag.width();//倍数

           $imgCon.mousemove(function(e){
               $Drag.css('display','block');
               $show.css('display','block');
               var iX = e.pageX - $(this).offset().left - $Drag.width()/2,
                   iY = e.pageY - $(this).offset().top - $Drag.height()/2,
                   MaxX = $imgCon.width()-$Drag.width(),
                   MaxY = $imgCon.height()-$Drag.height();

               iX = iX > 0 ? iX : 0;
               iX = iX < MaxX ? iX : MaxX;
               iY = iY > 0 ? iY : 0;
               iY = iY < MaxY ? iY : MaxY;
               $Drag.css({left:iX+'px',top:iY+'px'});
               $showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});
               //return false;
           });
           $imgCon.mouseout(function(){
               $Drag.css('display','none');
               $show.css('display','none');
               //return false;
           });

       }
       $(".fangdajing").on("mouseover",function () {
           $(this).magnifying();
       }); 
 });

<div class="con-FangD fangdajing" style=" 500px;height: 450px;margin-top: 40px;margin-left: 10px;">
    <div class="con-fangDaIM">
        <img><!-- 正常现实的图片 -->
        <div class="magnifyingBegi"></div><!-- 滑块 -->
        <div class="magnifyingSho" style=" 50%;height: 50%;right: -52%;"><!-- 放大镜显示的图片 -->
            <img  style="max- none;"><!-- 被全局img的max-width限制 必须加这个max- none; -->
        </div>
    </div>
</div>


//打开弹出层js

  function fangdajing(path) {
    
      $("#personPhotoID img").prop("src", "<%=basePath%>file/personPhoto/"+path);
      $("#personPhotoID").modal('show');
}