我创建了一个网站，需要一个图片放大功能。在网上找了半天，发现不喜欢。最后无奈之下自己写了一篇。demo地址和demo图片：self感觉效果还不错。现在分享给大家看看。如果不好，请给我一些建议。谢谢。CSS部分：.zoomify-dialog-pic{位置：固定；顶部：0；底部：0；左：0；右：0；背景：rgba（0,0,0,0.35）；z-指数：99999；显示：无；}.zoomify-dialog-pic.dialog-body{位置：绝对；宽度：100%；最大宽度：250px；最大高度：300px；边距顶部：-150px；/margin-left:-125px;/*div宽度的一半*/top:50%;左：50%；填充：10px；边界半径：5px；背景：白色；}.zoomify-dialog-pic.dialog-bodyimg{宽度：100%；}.magnifier{光标：-moz-zoom-out；光标：-webkit-zoom-out；光标：缩小；cursor:url('icon/magnifier.ico'),auto;}.un-magnifier{cursor:-moz-zoom-in;光标：-webkit-zoom-in；光标：放大；cursor:url('icon/unmagnifier.ico'),auto;}说明，请把上面css的cursor:url放到你自己的图片服务器上，万恶的IE不支持本地js部分：varROOT=$("input[name='globalPath']").val();functionzoomOut(orginImg,times){varobj=$(".zoomify-dialog-pic.dialog-body");varimg=$(".zoomify-dialog-pic.dialog-bodyimg");varimgW=$(orginImg).width();varimgH=$(orginImg).height();varnewH=imgH*times;varnewW=imgW*times;varbodyH=$("body").height();varbodyW=$("body").width();if(newW>bodyW){newW=bodyW-40;obj.css("padding","5px");}if(newH>bodyH){newH=bodyH-40;obj.css("padding","5px");}//图片newheightandwidthimg.css("width",newW+"px");img.css("height",newH+"px");//容器的新高宽，因为图片放大了，容器也必须放大//不要使用padding属性，即不支持varpadding=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");}functioninsertPic(url){html='
