|
副问题[/!--empirenews.page--]
先来看一下结果：
提醒：可修改儿女码再运行!
[措施声名]
首要为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) / 2
left: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),而在移动进程中,始坐标只会向负偏向移动.
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
