花了很長時間擼了個網站，觀點,其中需要一個圖片放大功能，網上找了半天發現都沒有中意的，最后無奈之下自己寫了一個，演示地址，演示圖片：

QQ截圖20171217152540.png

自我感覺效果還不錯，現在分享開來給大家看看，哪里不好還請多多指教，謝謝大家。
css 部分：

.zoomify-dialog-pic {  
     position: fixed;  
     top: 0;  
     bottom: 0;  
     left: 0;  
     right: 0;  
     background: rgba(0,0,0,0.35);  
     z-index: 99999;  
     display: none;  
}  
   
.zoomify-dialog-pic .dialog-body {  
        
      position:absolute;  
      width: 100%;  
      max-width: 250px;  
      max-height: 300px;  
      margin-top:-150px;/*div 高度的一半*/  
      margin-left:-125px;/*div 寬度的一半*/  
      top:50%;  
      left:50%;  
      padding:10px;  
      border-radius:5px;  
      background: white;  
}  
        
.zoomify-dialog-pic .dialog-body img {  
     width: 100%;  
}  
   
.magnifier {  
  cursor: -moz-zoom-out;  
  cursor: -webkit-zoom-out;  
  cursor: zoom-out;  
  cursor:url('icon/magnifier.ico'),auto;  
}  
   
.un-magnifier {  
  cursor: -moz-zoom-in;  
  cursor: -webkit-zoom-in;  
  cursor: zoom-in;  
  cursor:url('icon/unmagnifier.ico'),auto;  
}  

說明下,上面 css 的 cursor:url 請放到自己的圖片服務器上，萬惡的 IE 不支持本地
js 部分：

var ROOT = $("input[name='globalPath']").val();
 
function zoomOut(orginImg,times){
     
    var obj=$(".zoomify-dialog-pic .dialog-body");
    var img=$(".zoomify-dialog-pic .dialog-body img");
 
    var imgW=$(orginImg).width();
    var imgH=$(orginImg).height();
 
    var newH=imgH*times;
    var newW=imgW*times;
     
    var bodyH=$("body").height();
    var bodyW=$("body").width();
     
    if(newW>bodyW){
        newW=bodyW-40;
        obj.css("padding","5px");
    }
     
    if(newH>bodyH){
        newH=bodyH-40;
        obj.css("padding","5px");
    }
     
    //圖片新高度、寬度
    img.css("width",newW+"px");
    img.css("height",newH+"px");
     
    //容器新高度、寬度,因為圖片放大了，所以容器也必須放大
    //不要用 padding 屬性，ie 下不支持
    var padding=parseInt(obj.css("padding-top"));
     
    cWith=newW+padding*2;
    cHeight=newH+padding*2;
     
    obj.css("max-width",cWith+"px");
    obj.css("max-height",cHeight+"px");
     
    obj.css("margin-left",(cWith/2)*-1+"px");
    obj.css("margin-top",(cHeight/2)*-1+"px");
}
 
function insertPic(url){
    html='<div class="zoomify-dialog-pic">'+
        '<div class="dialog-body">'+
            '<img src="'+url+'" class="un-magnifier">'+
        '</div>'+
    '</div>';
    return html;
}
 
$(".page-content-l").on('click','p img',function(){
 
    var url=$(this).attr('src');
    html=insertPic(url);
    $("body").append(html);
     
    zoomOut(this,1.2);
    $(".zoomify-dialog-pic").show();
});
 
$("html").on('click','.zoomify-dialog-pic',function(){
    $(this).remove();
});
 
$(".page-content-l").on("mouseover mouseout","p img",function(event){
    if(event.type == "mouseover"){
        $(this).addClass("magnifier");
    }else if(event.type == "mouseout"){
        $(this).removeClass("magnifier");
    }
});

代碼是毫無保留公開，絕對可以使用的，喜歡給我點個贊，也可以加我的 qq 群交流：284205104，謝謝您的閱讀。