ecshop 放大镜效果

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ /* Copyright 2008 MagicToolBox.com. To use this code on your own site, visit http://magictoolbox.com */ var MagicZoom_ua='msie';var W=navigator.userAgent.toLowerCase();if(W.indexOf("opera")!=-1){ MagicZoom_ua='opera' }else if(W.indexOf("msie")!=-1){ MagicZoom_ua='msie' }else if(W.indexOf("safari")!=-1){ MagicZoom_ua='safari' }else if(W.indexOf("mozilla")!=-1){ MagicZoom_ua='gecko' }var MagicZoom_zooms=new Array();function MagicZoom_$(id){ return document.getElementById(id) };function MagicZoom_getStyle(el,styleProp){ if(el.currentStyle){ var y=el.currentStyle[styleProp];y=parseInt(y)?y:'0px' }else if(window.getComputedStyle){ var css=document.defaultView.getComputedStyle(el,null);var y=css?css[styleProp]:null }else{ y=el.style[styleProp];y=parseInt(y)?y:'0px' }return y };function MagicZoom_getBounds(e){ if(e.getBoundingClientRect){ var r=e.getBoundingClientRect();var wx=0;var wy=0;if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){ wy=document.body.scrollTop;wx=document.body.scrollLeft }else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){ wy=document.documentElement.scrollTop;wx=document.documentElement.scrollLeft }return{ 'left':r.left+wx, 'top':r.top+wy, 'right':r.right+wx, 'bottom':r.bottom+wy } } }function MagicZoom_getEventBounds(e){ var x=0;var y=0;if(MagicZoom_ua=='msie'){ y=e.clientY;x=e.clientX;if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){ y=e.clientY+document.body.scrollTop;x=e.clientX+document.body.scrollLeft }else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){ y=e.clientY+document.documentElement.scrollTop;x=e.clientX+document.documentElement.scrollLeft } }else{ y=e.clientY;x=e.clientX;y+=window.pageYOffset;x+=window.pageXOffset }return{ 'x':x, 'y':y } }function MagicView_ia(){ return false };var MagicZoom_extendElement=function(){ var args=arguments;if(!args[1])args=[this,args[0]];for(var property in args[1])args[0][property]=args[1][property];return args[0] };function MagicZoom_addEventListener(obj,event,listener){ if(MagicZoom_ua=='gecko'||MagicZoom_ua=='opera'||MagicZoom_ua=='safari'){ try{ obj.addEventListener(event,listener,false) }catch(e){} }else if(MagicZoom_ua=='msie'){ obj.attachEvent("on"+event,listener) } };function MagicZoom_removeEventListener(obj,event,listener){ if(MagicZoom_ua=='gecko'||MagicZoom_ua=='opera'||MagicZoom_ua=='safari'){ obj.removeEventListener(event,listener,false) }else if(MagicZoom_ua=='msie'){ obj.detachEvent("on"+event,listener) } };function MagicZoom_concat(){ var result=[];for(var i=0;i<arguments.length;i++)for(var j=0;j<arguments[i].length;j++)result.push(arguments[i][j]);return result };function MagicZoom_withoutFirst(sequence,skip){ result=[];for(var i=skip;i<sequence.length;i++)result.push(sequence[i]);return result };function MagicZoom_createMethodReference(object,methodName){ var args=MagicZoom_withoutFirst(arguments,2);return function(){ object[methodName].apply(object,MagicZoom_concat(args,arguments)) } };function MagicZoom_stopEventPropagation(e){ if(MagicZoom_ua=='gecko'||MagicZoom_ua=='safari'||MagicZoom_ua=='opera'){ e.cancelBubble=true;e.preventDefault();e.stopPropagation() }else if(MagicZoom_ua=='msie'){ window.event.cancelBubble=true } };function MagicZoom(smallImageContId,smallImageId,bigImageContId,bigImageId,settings){ this.version='2.3';this.recalculating=false;this.smallImageCont=MagicZoom_$(smallImageContId);this.smallImage=MagicZoom_$(smallImageId);this.bigImageCont=MagicZoom_$(bigImageContId);this.bigImage=MagicZoom_$(bigImageId);this.pup=0;this.settings=settings;if(!this.settings["header"]){ this.settings["header"]="" }this.bigImageSizeX=0;this.bigImageSizeY=0;this.smallImageSizeX=0;this.smallImageSizeY=0;this.popupSizeX=20;this.popupSizey=20;this.positionX=0;this.positionY=0;this.bigImageContStyleTop='';this.loadingCont=null;if(this.settings["loadingImg"]!=''){ this.loadingCont=document.createElement('DIV');this.loadingCont.style.position='absolute';this.loadingCont.style.visibility='hidden';this.loadingCont.className='MagicZoomLoading';this.loadingCont.style.display='block';this.loadingCont.style.textAlign='center';this.loadingCont.innerHTML=this.settings["loadingText"]+'<br/><img border="0" alt="'+this.settings["loadingText"]+'" src="'+this.settings["loadingImg"]+'"/>';this.smallImageCont.appendChild(this.loadingCont) }this.baseuri='';this.safariOnLoadStarted=false;MagicZoom_zooms.push(this);this.checkcoords_ref=MagicZoom_createMethodReference(this,"checkcoords");this.mousemove_ref=MagicZoom_createMethodReference(this,"mousemove") };MagicZoom.prototype.stopZoom=function(){ MagicZoom_removeEventListener(window.document,"mousemove",this.checkcoords_ref);MagicZoom_removeEventListener(this.smallImageCont,"mousemove",this.mousemove_ref);if(this.settings["position"]=="custom"){ MagicZoom_$(this.smallImageCont.id+"-big").removeChild(this.bigImageCont) }else{ this.smallImageCont.removeChild(this.bigImageCont) }this.smallImageCont.removeChild(this.pup) };MagicZoom.prototype.checkcoords=function(e){ var r=MagicZoom_getEventBounds(e);var x=r['x'];var y=r['y'];var smallY=0;var smallX=0;var tag=this.smallImage;while(tag&&tag.tagName!="BODY"&&tag.tagName!="HTML"){ smallY+=tag.offsetTop;smallX+=tag.offsetLeft;tag=tag.offsetParent }if(MagicZoom_ua=='msie'){ var r=MagicZoom_getBounds(this.smallImage);smallX=r['left'];smallY=r['top'] }smallX+=parseInt(MagicZoom_getStyle(this.smallImage,'borderLeftWidth'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,'borderTopWidth'));if(MagicZoom_ua!='msie'||!(document.compatMode&&'backcompat'==document.compatMode.toLowerCase())){ smallX+=parseInt(MagicZoom_getStyle(this.smallImage,'paddingLeft'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,'paddingTop')) }if(x>parseInt(smallX+this.smallImageSizeX)){ this.hiderect();return false }if(x<parseInt(smallX)){ this.hiderect();return false }if(y>parseInt(smallY+this.smallImageSizeY)){ this.hiderect();return false }if(y<parseInt(smallY)){ this.hiderect();return false }if(MagicZoom_ua=='msie'){ this.smallImageCont.style.zIndex=1 }return true };MagicZoom.prototype.mousedown=function(e){ MagicZoom_stopEventPropagation(e);this.smallImageCont.style.cursor='move' };MagicZoom.prototype.mouseup=function(e){ MagicZoom_stopEventPropagation(e);this.smallImageCont.style.cursor='default' };MagicZoom.prototype.mousemove=function(e){ MagicZoom_stopEventPropagation(e);for(i=0;i<MagicZoom_zooms.length;i++){ if(MagicZoom_zooms[i]!=this){ MagicZoom_zooms[i].checkcoords(e) } }if(this.settings&&this.settings["drag_mode"]==true){ if(this.smallImageCont.style.cursor!='move'){ return } }if(this.recalculating){ return }if(!this.checkcoords(e)){ return }this.recalculating=true;var smallImg=this.smallImage;var smallX=0;var smallY=0;if(MagicZoom_ua=='gecko'||MagicZoom_ua=='opera'||MagicZoom_ua=='safari'){ var tag=smallImg;while(tag.tagName!="BODY"&&tag.tagName!="HTML"){ smallY+=tag.