xcrane - 2010/8/4 18:05:00
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ImageZoom 图片放大效果（扩展篇）</title>
<script >
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 $$,$$B,$$A,$$F,$$D,$$E,$$CE,$$S;(3(){5 O,B,A,F,D,E,CE,S;O=3(id){4"1V"==1B id?M.getElementById(id):id};O.emptyFunction=3(){};O.extend=3(I,12,1n){9(1n===1W)1n=13;J(5 N K 12){9(1n||!(N K I)){I[N]=12[N]}}4 I};O.deepextend=3(I,12){J(5 N K 12){5 1f=12[N];9(I===1f)continue;9(1B 1f==="c"){I[N]=C.callee(I[N]||{},1f)}P{I[N]=1f}}4 I};O.wrapper=3(me,1Y){5 1C=3(){me.Q(14,C)};5 1D=3(){};1D.15=1Y.15;1C.15=new 1D;4 1C};B=(3(R){5 b={17:/17/.G(R)&&!/1E/.G(R),1E:/1E/.G(R),1Z:/webkit/.G(R)&&!/1F/.G(R),20:/20/.G(R),1F:/1F/.G(R)};5 1o="";J(5 i K b){9(b){1o="1Z"==i?"1g":i;1G}}b.1g=1o&&1H("(?:"+1o+")[\\\\/: ]([\\\\d.]+)").G(R)?1H.$1:"0";b.ie=b.17;b.21=b.17&&1J(b.1g,10)==6;b.ie7=b.17&&1J(b.1g,10)==7;b.22=b.17&&1J(b.1g,10)==8;4 b})(1K.navigator.userAgent.toLowerCase());A=3(){5 l={isArray:3(23){4 Object.15.toString.1h(23)==="[c 1L]"},1p:3(w,V,f){9(w.1p){4 1q(f)?w.1p(V):w.1p(V,f)}P{5 T=w.1i;f=1q(f)?0:f<0?1r.24(f)+T:1r.25(f);J(;f<T;f++){9(w[f]===V)4 f}4-1}},1s:3(w,V,f){9(w.1s){4 1q(f)?w.1s(V):w.1s(V,f)}P{5 T=w.1i;f=1q(f)||f>=T-1?T-1:f<0?1r.24(f)+T:1r.25(f);J(;f>-1;f--){9(w[f]===V)4 f}4-1}}};3 Z(c,t){9(1W===c.1i){J(5 k K c){9(x===t(c[k],k,c))1G}}P{J(5 i=0,T=c.1i;i<T;i++){9(i K c){9(x===t(c,i,c))1G}}}};Z({26:3(c,t,r){Z(c,3(){t.Q(r,C)})},map:3(c,t,r){5 l=[];Z(c,3(){l.27(t.Q(r,C))});4 l},1t:3(c,t,r){5 l=[];Z(c,3(28){t.Q(r,C)&&l.27(28)});4 l},every:3(c,t,r){5 l=13;Z(c,3(){9(!t.Q(r,C)){l=x;4 x}});4 l},some:3(c,t,r){5 l=x;Z(c,3(){9(t.Q(r,C)){l=13;4 x}});4 l}},3(29,k){l[k]=3(c,t,r){9(c[k]){4 c[k](t,r)}P{4 29(c,t,r)}}});4 l}();F=(3(){5 18=1L.15.18;4{bind:3(1u,r){5 19=18.1h(C,2);4 3(){4 1u.Q(r,19.2a(18.1h(C)))}},bindAsEventListener:3(1u,r){5 19=18.1h(C,2);4 3(g){4 1u.Q(r,[E.1j(g)].2a(19))}}}})();D={1v:3(m){5 1a=m?m.2b:M;4 1a.2c.2d||1a.2e.2d},1w:3(m){5 1a=m?m.2b:M;4 1a.2c.2f||1a.2e.2f},2g:M.1k?3(a,b){4!!(a.compareDocumentPosition(b)&16)}:3(a,b){4 a!=b&&a.2g(b)},v:3(m){5 o=0,U=0,W=0,X=0;9(!m.2h||B.22){5 n=m;while(n){o+=n.offsetLeft,U+=n.offsetTop;n=n.offsetParent};W=o+m.offsetWidth;X=U+m.offsetHeight}P{5 v=m.2h();o=W=D.1w(m);U=X=D.1v(m);o+=v.o;W+=v.W;U+=v.U;X+=v.X};4{"o":o,"U":U,"W":W,"X":X}},clientRect:3(m){5 v=D.v(m),1M=D.1w(m),1N=D.1v(m);v.o-=1M;v.W-=1M;v.U-=1N;v.X-=1N;4 v},curStyle:M.1k?3(p){4 M.1k.2i(p,2j)}:3(p){4 p.1x},getStyle:M.1k?3(p,k){5 h=M.1k.2i(p,2j);4 k K h?h[k]:h.getPropertyValue(k)}:3(p,k){5 h=p.1x;9(k=="11"){9(/1O\\(11=(.*)\\)/i.G(h.1t)){5 11=parseFloat(1H.$1);4 11?11/2k:0}4 1};9(k=="2l"){k="2m"}5 l=h[k]||h[S.1P(k)];9(!/^\\-?\\d+(px)?$/i.G(l)&&/^\\-?\\d/.G(l)){h=p.h,o=h.o,2o=p.1Q.o;p.1Q.o=p.1x.o;h.o=l||0;l=h.pixelLeft+"px";h.o=o;p.1Q.o=2o}4 l},setStyle:3(1l,h,1b){9(!1l.1i){1l=[1l]}9(1B h=="1V"){5 s=h;h={};h[s]=1b}A.26(1l,3(p){J(5 k K h){5 1b=h[k];9(k=="11"&&B.ie){p.h.1t=(p.1x.1t||"").2p(/1O\\([^)]*\\)/,"")+"1O(11="+1b*2k+")"}P 9(k=="2l"){p.h[B.ie?"2m":"cssFloat"]=1b}P{p.h[S.1P(k)]=1b}}})}};E=(3(){5 1c,1d,y=1;9(1K.2q){1c=3(u,j,q){u.2q(j,q,x)};1d=3(u,j,q){u.removeEventListener(j,q,x)}}P{1c=3(u,j,q){9(!q.$$y)q.$$y=y++;9(!u.Y)u.Y={};5 H=u.Y[j];9(!H){H=u.Y[j]={};9(u["on"+j]){H[0]=u["on"+j]}}H[q.$$y]=q;u["on"+j]=1y};1d=3(u,j,q){9(u.Y&&u.Y[j]){2r u.Y[j][q.$$y]}};3 1y(){5 1z=13,g=1j();5 H=14.Y[g.j];J(5 i K H){14.$$1y=H;9(14.$$1y(g)===x){1z=x}}4 1z}}3 1j(g){9(g)4 g;g=1K.g;g.pageX=g.clientX+D.1w(g.1S);g.pageY=g.clientY+D.1v(g.1S);g.target=g.1S;g.1T=1T;g.1U=1U;5 1A={"mouseout":g.toElement,"mouseover":g.fromElement}[g.j];9(1A){g.1A=1A}4 g};3 1T(){14.cancelBubble=13};3 1U(){14.1z=x};4{"1c":1c,"1d":1d,"1j":1j}})();CE=(3(){5 y=1;4{1c:3(c,j,q){9(!q.$$$y)q.$$$y=y++;9(!c.L)c.L={};9(!c.L[j])c.L[j]={};c.L[j][q.$$$y]=q},1d:3(c,j,q){9(c.L&&c.L[j]){2r c.L[j][q.$$$y]}},fireEvent:3(c,j){9(!c.L)4;5 19=1L.15.18.1h(C,2),H=c.L[j];J(5 i K H){H.Q(c,19)}}}})();S={1P:3(s){4 s.2p(/-([a-z])/ig,3(all,2s){4 2s.toUpperCase()})}};9(B.21){try{M.execCommand("BackgroundImageCache",x,13)}catch(e){}};$$=O;$$B=B;$$A=A;$$F=F;$$D=D;$$E=E;$$CE=CE;$$S=S})();',[],153,'|||function|return|var||||if|||object|||from|event|style||type|name|ret|node||left|elem|handler|thisp||callback|element|rect|array|false|guid||||arguments||||test|handlers|destination|for|in|cusevents|document|property||else|apply|ua||len|top|elt|right|bottom|events|each||opacity|source|true|this|prototype||msie|slice|args|doc|value|addEvent|removeEvent||copy|version|call|length|fixEvent|defaultView|elems||override|vMark|indexOf|isNaN|Math|lastIndexOf|filter|fun|getScrollTop|getScrollLeft|currentStyle|handleEvent|returnValue|relatedTarget|typeof|ins|subclass|opera|chrome|break|RegExp||parseInt|window|Array|sLeft|sTop|alpha|camelize|runtimeStyle||srcElement|stopPropagation|preventDefault|string|undefined||parent|safari|firefox|ie6|ie8|obj|ceil|floor|forEach|push|item|method|concat|ownerDocument|documentElement|scrollTop|body|scrollLeft|contains|getBoundingClientRect|getComputedStyle|null|100|float|styleFloat||rsLeft|replace|addEventListener|delete|letter'.split('|'),0,{}));
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([46-9a-df-oq-wzACG-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c 1Q=8(6,9,i){4.1R(6,9,i);4.1u()};1Q.prototype={1R:8(6,9,i){4.g=$$(6);4.j=w.createElement("img");4.q=$$(9);4.t=0;4.u=0;4.z=new Image();4.18=A;4.19=0;4.1a=0;4.L=0;4.M=0;4.X=A;4.N=1b;4.1c=1b;c 7=4.1S(i);4.m=7.b;4.1v=7.O;4.1w=7.P;4.1x=7.C;4.1d=7.Q;4.L=7.k;4.M=7.l;4.1e=7.1e;4.Y=7.Y;4.1f=7.1f;4.1g=7.1g;4.Z=7.Z;4.11=7.11;4.12=7.12;4.13=7.13;c 1h=4,1T=8(){1h.1U()};4.1i=8(){1h.X=setTimeout(1T,1h.1e)};4.G=$$F.1j(4.1V,4);4.1k=$$F.1j(4.1y,4);4.1z=$$F.1j(4.1W,4);4.1l=$$F.1j(8(e){a(!e.relatedTarget)4.1i()},4);$$H.I(4,"init")},1S:8(i){4.i={b:0,O:10,P:1.5,C:"",Q:"",k:0,l:0,1e:20,Y:1m,1f:1b,1g:.2,Z:$$.1n,11:$$.1n,12:$$.1n,13:$$.1n};1X $$.1Y(4.i,i||{})},1u:8(){c 6=4.g,C=4.1x,1A=!4.1d&&4.m,1o=$$F.1Z(1A?4.21:4.22,4);4.Y&&4.1B();a(C&&C!=6.h){6.r=1o;6.h=C}s a(6.h){a(!6.23){6.r=1o}s{1o()}}s{1X}a(!1A){c R=4.z,Q=4.1d||6.h,1C=$$F.1Z(4.1D,4);a(Q!=R.h){R.r=1C;R.h=Q}s{a(!R.23){R.r=1C}s{4.1D()}}}},21:8(){4.g.r=A;4.j.h=4.g.h;4.14()},22:8(){4.g.r=A;a(4.N){4.14()}s{4.N=1m;a(4.m){4.1c=1m;4.j.h=4.g.h;4.14()}}},1D:8(){4.z.r=A;4.j.h=4.z.h;a(4.N){a(!4.1c){4.14()}}s{4.N=1m}},14:8(h){4.1E();4.24();4.1F();$$H.I(4,"load");4.Z();4.1p()},1E:8(){c d=4.j,6=4.g,b=4.m;a(!b){b=4.z.S/6.S}4.m=b=f.P(f.O(4.1w,b),4.1v);d.S=f.n(6.S*b);d.1q=f.n(6.1q*b)},24:8(){c d=4.j,9=4.q;c J={1G:0,overflow:"25"},p=$$D.1H(9,"T");a(p!="26"&&p!="1I"){J.T="26"};$$D.1r(9,J);d.o.T="1I";a(!$$D.1J(9,d)){9.appendChild(d)}},1F:8(){c d=4.j,6=4.g,9=4.q,b=4.m,k=4.L,l=4.M;4.18=$$D.v(6);4.19=6.clientLeft+27($$D.1H(6,"1G-U"));4.1a=6.clientTop+27($$D.1H(6,"1G-V"));a(k>0&&l>0){k=f.n(k);l=f.n(l);4.t=f.n(k*b);4.u=f.n(l*b);$$D.1r(9,{S:4.t+"px",1q:4.u+"px"})}s{c J;a(!9.28){c o=9.o;J={15:o.15,T:o.T,1K:o.1K};$$D.1r(9,{15:"29",T:"1I",1K:"25"})}4.t=9.28;4.u=9.clientHeight;a(J){$$D.1r(9,J)}k=f.n(4.t/b);l=f.n(4.u/b)}4.L=k;4.M=l},1V:8(){1L(4.X);c 9=4.q,6=4.g,b=4.m;9.o.15="29";$$H.I(4,"1p");4.11();$$E.K(6,"1M",4.G);$$E.K(6,"16",4.G);$$E.17(w,"16",4.1k);$$E.17(w,"2a",4.1l);4.1f&&$$E.17(w,$$B.2b?"2c":"2d",4.1z)},1y:8(e){1L(4.X);c x=e.pageX,y=e.pageY,v=4.18;a(x<v.U||x>v.right||y<v.V||y>v.bottom){4.1i()}s{c W={},b=4.m,d=4.j,1N=4.t,1O=4.u;W.U=1N/2-(x-v.U-4.19)*b;W.V=1O/2-(y-v.V-4.1a)*b;$$H.I(4,"repair",e,W);x=f.n(f.P(f.O(W.U,1N-d.S),0));y=f.n(f.P(f.O(W.V,1O-d.1q),0));d.o.U=x+"px";d.o.V=y+"px";$$H.I(4,"move",e,x,y);4.12()}},1U:8(){$$H.I(4,"end");4.13();4.Y&&4.1B();4.1t();4.1p()},1B:8(){4.q.o.15="none"},1W:8(e){4.m+=(e.2e?e.2e/(-120):(e.detail||0)/3)*4.1g;c 7=4.i;4.L=7.k;4.M=7.l;4.1E();4.1F();4.1y(e);e.preventDefault()},1p:8(){a(4.t&&4.u){c 6=4.g,1P=4.G;$$E.17(6,"1M",1P);$$E.17(6,"16",1P)}},1t:8(){1L(4.X);$$E.K(4.g,"1M",4.G);$$E.K(4.g,"16",4.G);$$E.K(w,"16",4.1k);$$E.K(w,"2a",4.1l);$$E.K(w,$$B.2b?"2c":"2d",4.1z)},reset:8(i){4.1t();c 9=4.q,d=4.j;a($$D.1J(9,d)){9.2f(d)}c 7=$$.1Y(4.i,i||{});4.m=7.b;4.1v=7.O;4.1w=7.P;4.1x=7.C;4.1d=7.Q;4.L=7.k;4.M=7.l;4.N=4.1c=1b;4.18=A;4.19=4.1a=4.t=4.u=0;4.1u()},2g:8(){$$H.I(4,"2g");4.1t();a($$D.1J(4.q,4.j)){4.q.2f(4.j)}4.g.r=4.z.r=4.g=4.z=4.j=4.q=4.Z=4.11=4.12=4.13=4.G=4.1k=4.1i=4.1l=A}}',[],141,'||||this||image|opt|function|viewer|if|scale|var|zoom||Math|_image|src|options|_zoom|rangeWidth|rangeHeight|_scale|ceil|style||_viewer|onload|else|_viewerWidth|_viewerHeight|rect|document|||_preload|null||originPic||||_START|CE|fireEvent|styles|removeEvent|_rangeWidth|_rangeHeight|_loaded|max|min|zoomPic|preload|width|position|left|top|pos|_timer|autoHide|onLoad||onStart|onMove|onEnd|_initLoaded|display|mousemove|addEvent|_rect|_repairLeft|_repairTop|false|_substitute|_zoomPic|delay|mouse|rate|oThis|_END|bindAsEventListener|_MOVE|_OUT|true|emptyFunction|loadImage|start|height|setStyle||stop|_initLoad|_max|_min|_originPic|_move|_MOUSE|useOrigin|_hide|loadPreload|_loadPreload|_initSize|_initData|padding|getStyle|absolute|contains|visibility|clearTimeout|mouseover|viewerWidth|viewerHeight|START|ImageZoom|_initialize|_setOptions|END|_end|_start|_mouse|return|extend|bind||_loadOriginImage|_loadImage|complete|_initViewer|hidden|relative|parseInt|clientWidth|block|mouseout|firefox|DOMMouseScroll|mousewheel|wheelDelta|removeChild|dispose'.split('|'),0,{}))
</script>
<script>
ImageZoom._MODE = {
//跟随
"follow": {
methods: {
init: function() {
this._stylesFollow = null;//备份样式
this._repairFollowLeft = 0;//修正坐标left
this._repairFollowTop = 0;//修正坐标top
},
load: function() {
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
viewer.style.position = "absolute";
//获取修正参数
if ( !viewer.offsetWidth ) {//隐藏
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
//修正中心位置
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
//修正offsetParent位置
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
if ( styles ) { $$D.setStyle( viewer, styles ); }
},
repair: function(e, pos) {
var zoom = this._zoom,
viewerWidth = this._viewerWidth,
viewerHeight = this._viewerHeight;
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
},
move: function(e) {
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
},
dispose: function() {
$$D.setStyle( this._viewer, this._stylesFollow );
}
}
},
//拖柄
"handle": {
options: {//默认值
handle: ""//拖柄对象
},
methods: {
init: function() {
var handle = $$( this.options.handle );
if ( !handle ) {//没有定义的话用复制显示框代替
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;//生成标识用于移除
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
this._handle = handle;
this._repairHandleLeft = 0;//修正坐标left
this._repairHandleTop = 0;//修正坐标top
},
load: function() {
var handle = this._handle, rect = this._rect;
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
//获取修正参数
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
//修正offsetParent位置
if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
//隐藏
$$D.setStyle( handle, { display: "none", visibility: "visible" });
},
start: function() {
this._handle.style.display = "block";
},
move: function(e, x, y) {
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
},
end: function() {
this._handle.style.display = "none";
},
dispose: function() {
if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); }
this._handle = null;
}
}
},
//切割
"cropper": {
options: {//默认值
opacity: .5//透明度
},
methods: {
init: function() {
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
this._cropper = cropper;
this.opacity = this.options.opacity;
},
load: function() {
var cropper = this._cropper, image = this._image, rect = this._rect;
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
},
start: function() {
this._cropper.style.display = "block";
$$D.setStyle( this._image, "opacity", this.opacity );
},
move: function(e, x, y) {
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
},
end: function() {
$$D.setStyle( this._image, "opacity", 1 );
this._cropper.style.display = "none";
},
dispose: function() {
document.body.removeChild( this._cropper );
this._cropper = null;
}
}
}
}
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
return function(){
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
//扩展options
$$.extend( options, mode.options, false );
//扩展钩子
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
init.apply( this, arguments );
}
})();
</script>
</head>
<body style="padding:100px">
<style>
.container{ position:relative;}
.izImage, .izViewer{border:1px solid #000;background:#fff url('http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif') no-repeat center;}
.izImage{width:300px;}
.izViewer{width:200px;height:200px;position:absolute;left:320px;top:0;display:none;}
</style>
模式选择：<br>
<input name="izMode" type="radio" value="simple" checked>
一般模式
<input name="izMode" type="radio" value="follow">
跟随模式
<input name="izMode" type="radio" value="handle">
手柄模式
<input name="izMode" type="radio" value="cropper">
切割模式
<input name="izMode" type="radio" value="handle-cropper">
手柄切割模式 <br>
<br>
<div class="container"> <img id="idImage" class="izImage" src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_small.jpg" />
<div id="idViewer" class="izViewer"></div>
</div>
<div id="idHandle" style="display:none;opacity:0.5;filter:alpha(opacity=50);background:#fff;"></div>
<div id="idHandle2" style="display:none;border:1px solid #000;"></div>
<script>
var options = { scale: 5, zoomPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg" },
iz = new ImageZoom( "idImage", "idViewer", options );
$$A.forEach(document.getElementsByName("izMode"), function(elem) {
elem.onclick = function (){
iz.dispose();
iz = new ImageZoom( "idImage", "idViewer", $$.extend( options, {
mode: this.value,
handle: this.value == "handle" ? "idHandle" : "idHandle2"
}));
}
});
</script>
<br>
仿凡客诚品(vancl)商品图片放大效果
<style>
.list{ padding-right:10px;}
.list img{ cursor:pointer; padding:1px; border:1px solid #cdcdcd; margin-bottom:10px; display:block;}
.list img.onzoom, .list img.on{padding:0px; border:2px solid #336699;}
.izImage2{border:0;width:400px;}
.izViewer2{width:360px;height:300px;position:absolute;left:420px;top:0;display:none; border:1px solid #999;}
.handle2{display:none;opacity:0.6;filter:alpha(opacity=60);background:#E6EAF3; cursor:crosshair;}
</style>
<table>
<tr>
<td valign="top"><div id="idList" class="list"> </div></td>
<td><div class="container"> <img id="idImage2" class="izImage2" />
<div id="idViewer2" class="izViewer2"></div>
</div></td>
</tr>
</table>
<div id="idHandle3" class="handle2"></div>
<script>
(function(){
var iz = new ImageZoom( "idImage2", "idViewer2", {
mode: "handle", handle: "idHandle3", scale: 2, delay: 0
});
var arrPic = [], list = $$("idList"), image = $$("idImage2");
arrPic.push({ smallPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_s_1.jpg", originPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_m_1.jpg", zoomPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_b_1.jpg" });
arrPic.push({ smallPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_s_2.jpg", originPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_m_2.jpg", zoomPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/241722/o_b_2.jpg" });
$$A.forEach(arrPic, function(o, i){
var img = list.appendChild(document.createElement("img"));
img.src = o.smallPic;
img.onclick = function(){
iz.reset({ originPic: o.originPic, zoomPic: o.zoomPic });
$$A.forEach(list.getElementsByTagName("img"), function(img){ img.className = ""; });
img.className = "onzoom";
}
var temp;
img.onmouseover = function(){ if( !this.className ){ this.className = "on"; temp = image.src; image.src = o.originPic; } }
img.onmouseout = function(){ if( this.className == "on" ){ this.className = ""; image.src = temp; } }
if(!i){ img.onclick(); }
})
})()
</script>
</body>
</html>
你去精炼一下，达到你的效果