花了很长时间撸了个网站，观点,其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片：
自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。
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，谢谢您的阅读。
图片放大功能如何做？jquery实现
原文地址：http://www.cnblogs.com/huangxie/p/8052615.html