JS实例教程:制作图片放大特效

http://www.itjxue.com  2015-08-06 23:09  来源:未知  点击次数: 

效果:

运行代码框

[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'    //原始图像的高*比例值
})

由于放大是根据比例进行放大,所以在浏览框上和放大图像上需要仔细计算,这也就是该程序的主要思维之一。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章