效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
以前写过一个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' //原始图像的高*比例值 })
由于放大是根据比例进行放大,所以在浏览框上和放大图像上需要仔细计算,这也就是该程序的主要思维之一。
出处:蓝色理想
责任编辑:bluehearts
上一页 下一页 JavaScript图片放大效果详解 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|