Magnifier#magnifier{width:342px;height:420px;position:absolute;top:100px;left:250px;font-size:0;border:1pxsolid#000;}#img{width:342px;height:420px;}#Browser{border:1pxsolid#000;z-index:100;position:absolute;background:#555;}#mag{border:1pxsolid#000;overflow:hidden;z-index:100;}functiongetEventObject(W3CEvent){//事件标准化函数returnW3CEvent||window.event;}functiongetPointerPosition(e){//兼容浏览器的鼠标x,y获得函数e=e||getEventObject(e);varx=e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));vary=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop));return{'x':x,'y':y};}functionsetOpacity(elem,level){//兼容浏览器设置透明值if(elem.filters){elem.style.filter='alpha(opacity='+level*100+')';}else{elem.style.opacity=level;}}functioncss(elem,prop){//css设置函数,可以方便设置css值,并且兼容设置透明值for(variinprop){if(i=='opacity'){setOpacity(elem,prop[i]);}else{elem.style[i]=prop[i];}}returnelem;}varmagnifier={m:null,init:function(magni){varm=this.m=magni||{cont:null,//装载原始图像的divimg:null,//放大的图像mag:null,//放大框scale:15//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决}css(m.img,{'position':'absolute','width':(m.cont.clientWidth*m.scale)+'px',//原始图像的宽*比例值'height':(m.cont.clientHeight*m.scale)+'px'//原始图像的高*比例值})css(m.mag,{'display':'none','width':m.cont.clientWidth+'px',//m.cont为原始图像,与原始图像等宽'height':m.cont.clientHeight+'px','position':'absolute','left':m.cont.offsetLeft+m.cont.offsetWidth+10+'px',//放大框的位置为原始图像的右方远10px'top':m.cont.offsetTop+'px'})varborderWid=m.cont.getElementsByTagName('div')[0].offsetWidth-m.cont.getElementsByTagName('div')[0].clientWidth;//获取border的宽css(m.cont.getElementsByTagName('div')[0],{//m.cont.getElementsByTagName('div')[0]为浏览框'display':'none',//开始设置为不可见'width':m.cont.clientWidth/m.scale-borderWid+'px',//原始图片的宽/比例值-border的宽度'height':m.cont.clientHeight/m.scale-borderWid+'px',//原始图片的高/比例值-border的宽度'opacity':0.5//设置透明度})m.img.src=m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像m.cont.style.cursor='crosshair';m.cont.onmouseover=magnifier.start;},start:function(e){if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖magnifier.createIframe(magnifier.m.img);}this.onmousemove=magnifier.move;//this指向m.contthis.onmouseout=magnifier.end;},move:function(e){varpos=getPointerPosition(e);//事件标准化this.getElementsByTagName('div')[0].style.display='';css(this.getElementsByTagName('div')[0],{'top':Math.min(Math.max(pos.y-this.offsetTop-parseInt(this.getElementsByTagName('div')[0].style.height)/2,0),this.clientHeight-this.getElementsByTagName('div')[0].offsetHeight)+'px','left':Math.min(Math.max(pos.x-this.offsetLeft-parseInt(this.getElementsByTagName('div')[0].style.width)/2,0),this.clientWidth-this.getElementsByTagName('div')[0].offsetWidth)+'px'//left=鼠标x-this.offsetLeft-浏览框宽/2,Math.max和Math.min让浏览框不会超出图像})...
