以前写过一个jQuery的图片放大效果,但是存在着一些小问题,然后最近有时间重写了一遍,做了很详尽的改进.改进了大部分bug,而且不采用jQuery.[程序说明]主要为magnifier类,里面的主要方法有:init:运行方法start:则是鼠标移入div的事件处理move:则是鼠标在div中移动的事件处理end:鼠标移出后的事件处理[程序介绍]主要思维:当鼠标移入图片的时候,放大层的DIV出现,然后根据鼠标移动状况,改变放大层内图像的top值和left值.使得2个地方保持一致的现实.而2个图像跟据比例进行设置,width和height值,使之产生放大的效果.下面进行详细的解释:在init方法中,主要处理浏览框div层的大小,放大框的大小和放大的图像大小.浏览框div的width和height跟据,原始图片的大小/比例值可以获得,见代码:复制内容到剪贴板代码: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':'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'})放大的图像大小为,原始图像大小*比例值,代码如下:复制内容到剪贴板代码:css(m.img,{'position':'absolute','width':(m.cont.clientWidth*m.scale)+'px',//原始图像的宽*比例值'height':(m.cont.clientHeight*m.scale)+'px'//原始图像的高*比例值})由于放大是根据比例进行放大,所以在浏览框上和放大图像上需要仔细计算,这也就是该程序的主要思维之一.在第一次写的程序里,直接省去了onmouseover,因为直接使用onmousemove就可以满足功能.而这次使用onmouseover是为了避免在使用过程中遇到select,在IE6下,select无法设置z-Index值,使得放大框的突然出现却无法覆盖select.详细下面在讨论.在move方法中,最重要的就是如果做到鼠标移动过程中,浏览框随着鼠标移动的同时,放大图像也跟着运动,使得放大图像所显示的范围与浏览框所在原始图像位置一致.先说说浏览框跟随鼠标移动,主要代码如下:复制内容到剪贴板代码:top:pos.y-this.offsetTop-parseInt(this.getElementsByTagName('div')[0].style.height)/2left:pos.x-this.offsetLeft-parseInt(this.getElementsByTagName('div')[0].style.width)/2由于是,对m.cont绑定事件,所以这个时候this指向m.cont.由图像可以得知left=鼠标x-this.offsetLeft-浏览框宽/2,所以跟据该几何思想可以得出而代码,而top的值也是根据一样的道理所得,这里就不做详细解释了.接下来就是在鼠标运动的同时,放大图像也要跟着改变top和left值,代码如下:复制内容到剪贴板代码:css(magnifier.m.img,{'top':-(parseInt(this.getElementsByTagName('div')[0].style.top)*magnifier.m.scale)+'px','left':-(parseInt(this.getElementsByTagName('div')[0].style.left)*magnifier.m.scale)+'px'})代码很清晰的可以得出,只需要在浏览框的top和left值上*比例就可以了.而加上负号的原因是默认坐标为(0,0),而在移动过程中,始坐标只会向负方向移动.在该方法中有2个需要注意的地方:1.复制内容到剪贴板代码:this.getElementsByTagName('div')[0].style.display='';应该放在设置this.getElementsByTagName('div')[0]的top与left之前,原因是如果display为none的话,无法获取其宽和高.如果把display=''放在设置top与left之后,会出现一个奇怪的现象,大家可以试下,该问题一直困扰了我很久,在多次尝试中才发现问题再这上面.奇怪现象如下:2.复制内容到剪贴板代码:'top':Math.min(Math.max(pos.y-this.offsetTop-parseInt(this.getElementsByTagName('div')[0].style.height)/2,0),this.clientHeight-this.ge...
