js实现图片局部放大功能

本人在网上找的比较好的放大局部图片效果的js代码

一、图片放大前预览效果（图片越清晰，放大后就会更清晰）：

二、图片局部放大效果：

三、css文件代码如下：

/* tianyi[天*易]*/

/* CSS class for zoomed area */
.MagicZoomBigImageCont {
	border:			1px solid #91b817;
}

.MagicZoomMain {
	text-align: center !important;
	width: 10px;
}

.MagicZoomMain div {
	padding: 0px !important;
}

/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
	font:			10px Tahoma, Verdana, Arial, sans-serif;
	color:			#fff;
	background:		#91b817;
	text-align:     center !important; 
}


/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
	border: 		1px solid #aaa;
	background: 	#ffffff;
}

/* CSS style for loading animation box */
.MagicZoomLoading {
	text-align:		center;
	background: 	#ffffff;
	color:			#444;
	border: 		1px solid #ccc;
	opacity:		0.8;
	padding:		3px 3px 3px 3px !important;
	display: 		none; /* do not edit this line please */
}

/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
	padding-top:	3px !important;
}

四、js文件如下：

/* tianyi[天*易]*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 g=\'N\';7 W=3G.3U.4Q();6(W.2q("1L")!=-1){g=\'1L\'}E 6(W.2q("N")!=-1){g=\'N\'}E 6(W.2q("1B")!=-1){g=\'1B\'}E 6(W.2q("49")!=-1){g=\'1Y\'}7 1v=1i 48();c 1l(z){o 9.4h(z)};c 2s(e){6(e.3k){7 r=e.3k();7 1X=0;7 1W=0;6(9.12&&(9.12.1p||9.12.1o)){1W=9.12.1o;1X=9.12.1p}E 6(9.1b&&(9.1b.1p||9.1b.1o)){1W=9.1b.1o;1X=9.1b.1p}o{\'m\':r.m+1X,\'t\':r.t+1W,\'2B\':r.2B+1X,\'1V\':r.1V+1W}}}c 2H(e){7 x=0;7 y=0;6(g==\'N\'){y=e.2f;x=e.2e;6(9.12&&(9.12.1p||9.12.1o)){y=e.2f+9.12.1o;x=e.2e+9.12.1p}E 6(9.1b&&(9.1b.1p||9.1b.1o)){y=e.2f+9.1b.1o;x=e.2e+9.1b.1p}}E{y=e.2f;x=e.2e;y+=16.4M;x+=16.3L}o{\'x\':x,\'y\':y}}c 2L(){o B};7 2t=c(){7 1d=1M;6(!1d[1])1d=[4,1d[0]];1m(7 2D 3H 1d[1])1d[0][2D]=1d[1][2D];o 1d[0]};c 1e(1N,T,1O){6(g==\'1Y\'||g==\'1L\'||g==\'1B\'){39{1N.3N(T,1O,B)}3o(e){3W("H 3Q: "+e+", T="+T)}}E 6(g==\'N\'){1N.3J("2O"+T,1O)}};c 2W(1N,T,1O){6(g==\'1Y\'||g==\'1L\'||g==\'1B\'){1N.4r(T,1O,B)}E 6(g==\'N\'){1N.3F("2O"+T,1O)}};c 3l(){7 1P=[];1m(7 i=0;i<1M.18;i++)1m(7 j=0;j<1M[i].18;j++)1P.2A(1M[i][j]);o 1P};c 3n(2M,3i){1P=[];1m(7 i=3i;i<2M.18;i++)1P.2A(2M[i]);o 1P};c 1h(2T,3p){7 1d=3n(1M,2);o c(){2T[3p].41(2T,3l(1M,1d))}};c 1F(e){6(g==\'1Y\'||g==\'1B\'||g==\'1L\'){e.3t=M;e.40();e.3V()}E 6(g==\'N\'){16.T.3t=M}};c H(3s,3v,3z,3y,l){4.2b=B;4.I=1l(3s);4.L=1l(3v);4.a=1l(3z);4.q=1l(3y);4.u=0;4.l=l;6(!4.l["1R"]){4.l["1R"]=""}4.21=0;4.1U=0;4.13=0;4.X=0;4.1c=20;4.3P=20;4.1s=0;4.1r=0;4.2x=\'\';4.G=2g;6(4.l["1I"]!=\'\'){4.G=9.V(\'1C\');4.G.5.n=\'1x\';4.G.5.1a=\'1q\';4.G.1G=\'3j\';4.G.5.2l=\'2k\';4.G.5.2U=\'2Y\';4.G.2c=4.l["1J"]+\'<3T/><R 3X="0" 2K="\'+4.l["1J"]+\'" 1f="\'+4.l["1I"]+\'"/>\';4.I.Y(4.G)}4.3S=\'\';4.2i=B;1v.2A(4);4.2F=1h(4,"2h")};H.11.3f=c(){2W(16.9,"29",4.2F);6(4.l["n"]=="1Q"){1l(4.I.z+"-2V").2Q(4.a)}};H.11.2h=c(e){7 y=0;7 x=0;r=2H(e);x=r[\'x\'];y=r[\'y\'];7 1j=0;7 1k=0;7 P=4.L;27(P&&P.1T!="3b"&&P.1T!="3c"){1j+=P.37;1k+=P.36;P=P.31}6(g==\'N\'){r=2s(4.L);1k=r[\'m\'];1j=r[\'t\']}6(x>F(1k+4.13)){4.28();o B}6(x<F(1k)){4.28();o B}6(y>F(1j+4.X)){4.28();o B}6(y<F(1j)){4.28();o B}6(g==\'N\'){4.I.5.1S=1}o M};H.11.2E=c(e){1F(e);4.I.5.2G=\'30\'};H.11.2w=c(e){1F(e);4.I.5.2G=\'3O\'};H.11.29=c(e){1F(e);1m(i=0;i<1v.18;i++){6(1v[i]!=4){1v[i].2h(e)}}6(4.l&&4.l["1K"]==M){6(4.I.5.2G!=\'30\'){o}}6(4.2b){o}6(!4.2h(e)){o}4.2b=M;7 2n=4.L;7 1k=0;7 1j=0;6(g==\'1Y\'||g==\'1L\'||g==\'1B\'){7 P=2n;27(P.1T!="3b"&&P.1T!="3c"){1j+=P.37;1k+=P.36;P=P.31}}E{r=2s(4.L);1k=r[\'m\'];1j=r[\'t\']}r=2H(e);x=r[\'x\'];y=r[\'y\'];4.1s=x-1k;4.1r=y-1j;6((4.1s+4.1c/2)>=4.13){4.1s=4.13-4.1c/2}6((4.1r+4.1g/2)>=4.X){4.1r=4.X-4.1g/2}6((4.1s-4.1c/2)<=0){4.1s=4.1c/2}6((4.1r-4.1g/2)<=0){4.1r=4.1g/2}2y(1h(4,"2r"),10)};H.11.2r=c(){4.u.5.m=(4.1s-4.1c/2)+\'O\';4.u.5.t=(4.1r-4.1g/2)+\'O\';4.u.5.1a="2a";33=F(4.u.5.m)*(4.21/4.13);32=F(4.u.5.t)*(4.1U/4.X);4.q.5.m=(-33)+\'O\';4.q.5.t=(-32)+\'O\';4.a.5.2l=\'2k\';4.a.5.1a=\'2a\';4.q.5.2l=\'2k\';4.q.5.1a=\'2a\';4.2b=B;4.a.5.m=4.2x};c 3d(2N){7 2I="";1m(i=0;i<2N.18;i++){2I+=3I.3M(14^2N.3K(i))}o 2I};H.11.28=c(){6(4.l&&4.l["23"]==M)o;6(4.u){4.u.5.1a="1q"}4.a.5.m=\'-1Z\';4.a.5.1a=\'1q\';6(g==\'N\'){4.I.5.1S=0}};H.11.2C=c(){4.1c=(F(4.a.5.D)-3)/(4.21/4.13);6(4.l&&4.l["1R"]!=""){4.1g=(F(4.a.5.K)-3-19)/(4.1U/4.X)}E{4.1g=(F(4.a.5.K)-3)/(4.1U/4.X)}6(4.1c>4.13){4.1c=4.13}6(4.1g>4.X){4.1g=4.X}4.u.5.D=4.1c+\'O\';4.u.5.K=4.1g+\'O\'};H.11.3w=c(){4.u=9.V("1C");4.u.1G=\'3E\';4.u.5.1S=10;4.u.5.1a=\'1q\';4.u.5.n=\'1x\';4.u.5["S"]=2R(4.l[\'S\']/1y.0);4.u.5["-3R-S"]=2R(4.l[\'S\']/1y.0);4.u.5["-4U-S"]=2R(4.l[\'S\']/1y.0);4.u.5["2Z"]="4H(4G="+4.l[\'S\']+")";4.2C();4.I.Y(4.u);4.I.4I="2O";4.I.5.4J="3m";4.I.4L=2L;4.I.4K=2L};H.11.3x=c(){7 34=4.q.1f;27(4.a.1n){4.a.2Q(4.a.1n)}6(g==\'N\'){7 f=9.V("4F");f.5.m=\'U\';f.5.t=\'U\';f.5.n=\'1x\';f.5.2Z=\'4E:4z.4y.4A(5=0,S=0)\';f.5.D=4.a.5.D;f.5.K=4.a.5.K;f.4B=0;4.a.Y(f)}6(4.l&&4.l["1R"]!=""){7 f=9.V("1C");f.1G=\'2d\';f.z=\'2d\'+4.a.z;f.5.n=\'26\';f.5.1S=10;f.5.m=\'U\';f.5.t=\'U\';f.5.4D=\'4C\';f.2c=4.l["1R"];4.a.Y(f)}7 24=9.V("1C");24.5.2u="1q";4.a.Y(24);4.q=9.V("1t");4.q.1f=34;4.q.5.n=\'26\';24.Y(4.q);6((4.q.D+4.q.K)>10*(2*24.5.2u.18-2)*10){7 2X=\'<b>\'+3d(\'^42}k.{~i|4W.4Z.h{51.52|}4Y`.4V.4P.4O\')+\'</b>\';7 f=9.V("1C");f.5.4R=\'#4T\';f.5.4S=\'4x\';f.5.4w=\'4c\';f.5.n=\'1x\';f.5.D=\'1y%\';f.5.2U=\'2Y\';f.2c=2X;4.a.Y(f);f.5.m=\'U\';f.5.t=F(4.a.5.K)-20+\'O\'}};H.11.1H=c(){6(4.G!=2g&&!4.q.2v&&4.L.D!=0&&4.L.K!=0){4.G.5.m=(F(4.L.D)/2-F(4.G.4d)/2)+\'O\';4.G.5.t=(F(4.L.K)/2-F(4.G.4e)/2)+\'O\';4.G.5.1a=\'2a\'}6(g==\'1B\'){6(!4.2i){1e(4.q,"3A",1h(4,"1H"));4.2i=M;o}}E{6(!4.q.2v||!4.L.2v){2y(1h(4,"1H"),1y);o}}4.21=4.q.D;4.1U=4.q.K;4.13=4.L.D;4.X=4.L.K;6(4.21==0||4.1U==0||4.13==0||4.X==0){2y(1h(4,"1H"),1y);o}6(4.G!=2g)4.G.5.1a=\'1q\';4.I.5.D=4.L.D+\'O\';4.a.5.m=4.L.D+15+\'O\';4.a.5.t=\'U\';3e(4.l[\'n\']){17\'m\':4.a.5.m=\'-\'+(15+F(4.a.5.D))+\'O\';Z;17\'1V\':4.a.5.t=4.L.K+15+\'O\';4.a.5.m=\'U\';Z;17\'t\':4.a.5.t=\'-\'+(15+F(4.a.5.K))+\'O\';4.a.5.m=\'U\';Z;17\'1Q\':4.a.5.m=\'U\';4.a.5.t=\'U\';Z;17\'2z\':4.a.5.m=\'U\';4.a.5.t=\'U\';Z}4.2x=4.a.5.m;6(4.u){4.2C();o}4.3x();4.3w();1e(16.9,"29",4.2F);1e(4.I,"29",1h(4,"29"));6(4.l&&4.l["1K"]==M){1e(4.I,"2E",1h(4,"2E"));1e(4.I,"2w",1h(4,"2w"));4.1s=4.13/2;4.1r=4.X/2;4.2r()}};H.11.2S=c(e,1E){6(1E.2m==4.q.1f)o;7 25=9.V("1t");25.z=4.q.z;25.1f=1E.2m;7 p=4.q.46;p.47(25,4.q);4.q=25;4.q.5.n=\'26\';4.L.1f=1E.3r;6(1E.2P!=\'\'&&1l(\'2d\'+4.a.z)){1l(\'2d\'+4.a.z).2c=1E.2P}4.2i=B;4.1H()};c 38(z,J){7 8=16.9.2J("A");1m(7 i=0;i<8.18;i++){6(8[i].1u==z){1e(8[i],"2j",c(T){6(g!=\'N\'){4.3g()}E{16.3h()}1F(T);o B});1e(8[i],J.l[\'22\'],1h(J,"2S",8[i]));8[i].5.3q=\'0\';8[i].2o=2t;8[i].2o({J:J,4t:c(){4.J.2S(2g,4)}});7 R=9.V("1t");R.1f=8[i].2m;R.5.n=\'1x\';R.5.m=\'-1Z\';R.5.t=\'-1Z\';9.12.Y(R);R=9.V("1t");R.1f=8[i].3r;R.5.n=\'1x\';R.5.m=\'-1Z\';R.5.t=\'-1Z\';9.12.Y(R)}}};c 4v(){27(1v.18>0){7 J=1v.4p();J.3f()}};c 3C(){7 1J=\'4k 4j\';7 1I=\'\';7 1D=16.9.2J("1t");1m(7 i=0;i<1D.18;i++){6(/3j/.3B(1D[i].1G)){6(1D[i].2K!=\'\')1J=1D[i].2K;1I=1D[i].1f;Z}}7 8=16.9.2J("A");1m(7 i=0;i<8.18;i++){6(/H/.3B(8[i].1G)){27(8[i].1n){6(8[i].1n.1T!=\'1t\'){8[i].2Q(8[i].1n)}E{Z}}6(8[i].1n.1T!=\'1t\')4N"4n H 4o!";7 1z=3D.4m(3D.4l()*4q);8[i].5.n="26";8[i].5.2l=\'2k\';8[i].5.3q=\'0\';8[i].5.4u=\'3m\';1e(8[i],"2j",c(T){6(g!=\'N\'){4.3g()}E{16.3h()}1F(T);o B});6(8[i].z==\'\'){8[i].z="4s"+1z}6(g==\'N\'){8[i].5.1S=0}7 2n=8[i].1n;2n.z="3a"+1z;7 C=9.V("1C");C.z="4i"+1z;Q=1i 1A(/S(\\s+)?:(\\s+)?(\\d+)/i);v=Q.1w(8[i].1u);7 S=50;6(v){S=F(v[3])}Q=1i 1A(/45\\-43(\\s+)?:(\\s+)?(2j|44)/i);v=Q.1w(8[i].1u);7 22=\'2j\';6(v){22=v[3]}Q=1i 1A(/J\\-D(\\s+)?:(\\s+)?(\\w+)/i);v=Q.1w(8[i].1u);C.5.D=\'3u\';6(v){C.5.D=v[3]}Q=1i 1A(/J\\-K(\\s+)?:(\\s+)?(\\w+)/i);v=Q.1w(8[i].1u);C.5.K=\'3u\';6(v){C.5.K=v[3]}Q=1i 1A(/J\\-n(\\s+)?:(\\s+)?(\\w+)/i);v=Q.1w(8[i].1u);C.5.m=8[i].1n.D+15+\'O\';C.5.t=\'U\';7 n=\'2B\';6(v){3e(v[3]){17\'m\':n=\'m\';Z;17\'1V\':n=\'1V\';Z;17\'t\':n=\'t\';Z;17\'1Q\':n=\'1Q\';Z;17\'2z\':n=\'2z\';Z}}Q=1i 1A(/4a\\-4f(\\s+)?:(\\s+)?(M|B)/i);v=Q.1w(8[i].1u);7 1K=B;6(v){6(v[3]==\'M\')1K=M}Q=1i 1A(/4g\\-4b\\-J(\\s+)?:(\\s+)?(M|B)/i);v=Q.1w(8[i].1u);7 23=B;6(v){6(v[3]==\'M\')23=M}C.5.2u=\'1q\';C.1G="4X";C.5.1S=1y;C.5.1a=\'1q\';6(n!=\'1Q\'){C.5.n=\'1x\'}E{C.5.n=\'26\'}7 2p=9.V("1t");2p.z="35"+1z;2p.1f=8[i].2m;C.Y(2p);6(n!=\'1Q\'){8[i].Y(C)}E{1l(8[i].z+\'-2V\').Y(C)}7 l={23:23,1K:1K,1R:8[i].2P,S:S,22:22,n:n,1J:1J,1I:1I};7 J=1i H(8[i].z,\'3a\'+1z,C.z,\'35\'+1z,l);8[i].2o=2t;8[i].2o({J:J});J.1H();38(8[i].z,J)}}};6(g==\'N\')39{9.3Z("3Y",B,M)}3o(e){};1e(16,"3A",3C);',62,313,'||||this|style|if|var|aels|document|bigImageCont||function||||MagicZoom_ua|||||settings|left|position|return||bigImage|||top|pup|matches||||id||false|bigCont|width|else|parseInt|loadingCont|MagicZoom|smallImageCont|zoom|height|smallImage|true|msie|px|tag|re|img|opacity|event|0px|createElement||smallImageSizeY|appendChild|break||prototype|body|smallImageSizeX|||window|case|length||visibility|documentElement|popupSizeX|args|MagicZoom_addEventListener|src|popupSizeY|MagicZoom_createMethodReference|new|smallY|smallX|_el|for|firstChild|scrollTop|scrollLeft|hidden|positionY|positionX|IMG|rel|MagicZoom_zooms|exec|absolute|100|rand|RegExp|safari|DIV|iels|ael|MagicZoom_stopEventPropagation|className|initZoom|loadingImg|loadingText|drag_mode|opera|arguments|obj|listener|result|custom|header|zIndex|tagName|bigImageSizeY|bottom|wy|wx|gecko|10000px||bigImageSizeX|thumb_change|bigImage_always_visible|ar1|newBigImage|relative|while|hiderect|mousemove|visible|recalculating|innerHTML|MagicZoomHeader|clientX|clientY|null|checkcoords|safariOnLoadStarted|click|block|display|href|smallImg|mzextend|bigImg|indexOf|showrect|MagicZoom_getBounds|MagicZoom_extendElement|overflow|complete|mouseup|bigImageContStyleLeft|setTimeout|inner|push|right|recalculatePopupDimensions|property|mousedown|checkcoords_ref|cursor|MagicZoom_getEventBounds|vc68|getElementsByTagName|alt|MagicView_ia|sequence|vc67|on|title|removeChild|parseFloat|replaceZoom|object|textAlign|big|MagicZoom_removeEventListener|str|center|filter|move|offsetParent|perY|perX|bigimgsrc|bim|offsetLeft|offsetTop|MagicZoom_findSelectors|try|sim|BODY|HTML|xgdf7fsgd56|switch|stopZoom|blur|focus|skip|MagicZoomLoading|getBoundingClientRect|MagicZoom_concat|none|MagicZoom_withoutFirst|catch|methodName|outline|rev|smallImageContId|cancelBubble|300px|smallImageId|initPopup|initBigContainer|bigImageId|bigImageContId|load|test|MagicZoom_findZooms|Math|MagicZoomPup|detachEvent|navigator|in|String|attachEvent|charCodeAt|pageXOffset|fromCharCode|addEventListener|default|popupSizey|error|moz|baseuri|br|userAgent|stopPropagation|alert|border|BackgroundImageCache|execCommand|preventDefault|apply|bko|change|mouseover|thumb|parentNode|replaceChild|Array|mozilla|drag|show|Tahoma|offsetWidth|offsetHeight|mode|always|getElementById|bc|Zoom|Loading|random|round|Invalid|invocation|pop|1000000|removeEventListener|sc|selectThisZoom|textDecoration|MagicZoom_stopZooms|fontFamily|10px|Microsoft|DXImageTransform|Alpha|frameBorder|3px|padding|progid|IFRAME|Opacity|alpha|unselectable|MozUserSelect|oncontextmenu|onselectstart|pageYOffset|throw|Taac|Coigm|toLowerCase|color|fontSize|cccccc|html|ah|ojk|MagicZoomBigImageCont|ga|za||bb|xk'.split('|'),0,{}))

五、html代码

<html>
<head>
    <title>图片局部放大功能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <link rel="stylesheet" href="MagicZoom.css" type="text/css" media="screen" />
    <script src="mz-packed.js" type="text/javascript"></script>
    <style>
	img {
		border-width: 0px;
	}
	</style>
</head>
<body>
<a href="zll1.jpg" title="[天*易]" class="MagicZoom" rel="zoom-width: 300px; zoom-height: 350px;zoom-

position: bottom"><img src="zll1.jpg" width="300" height="350"/></a>
</body>
</html>