圖片放大功能如何作？jquery實現

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

自我感受效果還不錯，如今分享開來給你們看看，哪裏很差還請多多指教，謝謝你們。

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，謝謝您的閱讀。