《[计算机]JavaScript图片放大效果详解.doc》由会员分享，可在线阅读，更多相关《[计算机]JavaScript图片放大效果详解.doc（2页珍藏版）》请在三一办公上搜索。
1、JavaScript图片放大效果详解 作者：JcssRay时间： 2009-10-22文档类型：原创来自：蓝色理想 第 1 页 JavaScript图片放大效果详解 1第 2 页 JavaScript图片放大效果详解 2第 3 页 JavaScript图片放大效果详解 3效果：运行代码框Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行以前写过一个jQuery的图片放大效果,但是存在着一些小问题,然后最近有时间重写了一遍,做了很详尽的改进.改进了大部分bug,而且不采用jQuery.程序说明主要为magnifier类,里面的主要方法有： init：运行方法 start：则是鼠标移入di
2、v的事件处理 move：则是鼠标在div中移动的事件处理 end：鼠标移出后的事件处理程序介绍主要思维:当鼠标移入图片的时候,放大层的DIV出现,然后根据鼠标移动状况，改变放大层内图像的top值和left值，使得2个地方保持一致的现实。而2个图像跟据比例进行设置，width和height值，使之产生放大的效果，下面进行详细的解释：在init方法中，主要处理浏览框div层的大小，放大框的大小和放大的图像大小。浏览框div的width和height跟据，原始图片的大小/比例值可以获得，见代码：css(m.cont.getElementsByTagName(div)0, /m.cont.getEle
3、mentsByTagName(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.c
4、lientWidth + 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 /原始图像的高*比例值)由于放大是根据比例进行放大，所以在浏览框上和放大图像上需要仔细计算，这也就是该程序的主要思维之一。
