《放大镜代码与说明》由会员分享，可在线阅读，更多相关《放大镜代码与说明（9页珍藏版）》请在金锄头文库上搜索。
1、Magnifier#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; func
2、tion 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.documentElemen
3、t.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) set
4、Opacity(elem,propi); else elem.stylei = propi; 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 :
5、 (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 +
6、 px, /放大框的位置为原始图像的右方远 10px top : m.cont.offsetTop + px ) var borderWid = 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
7、.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 = m
8、agnifier.start; , start:function(e) if(document.all) /只在 IE 下执行,主要避免 IE6 的 select 无法覆盖 magnifier.createIframe(magnifier.m.img); this.onmousemove = magnifier.move; /this 指向 m.cont this.onmouseout = magnifier.end; , move:function(e) var pos = getPointerPosition(e); /事件标准化 this.getElementsByTagName(div
9、)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
10、(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 让浏览框不会超出图像 ) magnifier.m.mag.style.display = ; css(magnifier.m.img, top : - (parseInt(this.getElementsByTagName(div)0.s
11、tyle.top) * magnifier.m.scale) + px, left : - (parseInt(this.getElementsByTagName(div)0.style.left) * magnifier.m.scale) + px ) , end:function(e) this.getElementsByTagName(div)0.style.display = none; magnifier.removeIframe(magnifier.m.img); /销毁 iframe magnifier.m.mag.style.display = none; , createIf
12、rame:function(elem)var layer = document.createElement(iframe); layer.tabIndex = -1; layer.src = javascript:false; elem.parentNode.appendChild(layer); layer.style.width = elem.offsetWidth + px; layer.style.height = elem.offsetHeight + px; , removeIframe:function(elem) var layers = elem.parentNode.get
13、ElementsByTagName(iframe); while(layers.length 0) layers0.parentNode.removeChild(layers0); window.onload = function() magnifier.init( cont : document.getElementById(magnifier), img : document.getElementById(magnifierImg), mag : document.getElementById(mag), scale : 3 ); select 测试 是否能覆盖程序说明程序说明主要为 ma
14、gnifier 类,里面的主要方法有：init：运行方法 start：则是鼠标移入 div 的事件处理 move：则是鼠标在 div 中移动的事件处理 end：鼠标移出后的事件处理 程序介绍程序介绍主要思维:当鼠标移入图片的时候,放大层的 DIV 出现,然后根据鼠标移动状况， 改变放大层内图像的 top 值和 left 值，使得 2 个地方保持一致的现实。而 2 个 图像跟据比例进行设置，width 和 height 值，使之产生放大的效果，下面进行 详细的解释：在 init 方法中，主要处理浏览框 div 层的大小，放大框的大小和放大的图像大 小。 浏览框 div 的 width 和 hei
15、ght 跟据，原始图片的大小/比例值可以获得，见代 码：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 /设置透明度 )放大框的大小则设置为于原始图像相同大小，代码如下：css(m.mag,display :
