放大镜代码与说明.docVIP

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleMagnifier/title style type=text/css #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #mag{ border:1px solid #000; overflow:hidden; z-index:100; } /style script type=text/javascript function getEventObject(W3CEvent) { //事件标准化函数 return W3CEvent || window.event; } function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数 e = e || getEventObject(e); var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return { x:x,y:y }; } function setOpacity(elem,level) { //兼容浏览器设置透明值 if(elem.filters) { elem.style.filter = alpha(opacity= + level * 100 + ); } else { elem.style.opacity = level; } } function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值 for(var i in prop) { if(i == opacity) { setOpacity(elem,prop[i]); } else { elem.style[i] = prop[i]; } } return elem; } var magnifier = { m : null, init:function(magni){ var m = this.m = magni || { cont : null, //装载原始图像的div img : 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 }) var borderWid = m.cont.getElementsByTagName(div)[0].offsetWidth - m.cont.getEle