|
在第一次寫的程序里，直接省去了onmouseover，因?yàn)橹苯邮褂胦nmousemove就可以滿足功能。而這次使用onmouseover是為了避免在使用過(guò)程中遇到select，在IE6下，select無(wú)法設(shè)置z-Index值，使得放大框的突然出現(xiàn)卻無(wú)法覆蓋select。詳細(xì)下面在討論，
在move方法中，最重要的就是如果做到鼠標(biāo)移動(dòng)過(guò)程中，瀏覽框隨著鼠標(biāo)移動(dòng)的同時(shí)，放大圖像也跟著運(yùn)動(dòng),，使得放大圖像所顯示的范圍與瀏覽框所在原始圖像位置一致。
先說(shuō)說(shuō)瀏覽框跟隨鼠標(biāo)移動(dòng),主要代碼如下：
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
由于是，對(duì)m.cont綁定事件，所以這個(gè)時(shí)候this指向m.cont。
由圖像可以得知left=鼠標(biāo)x - this.offsetLeft - 瀏覽框?qū)?2，所以跟據(jù)該幾何思想可以得出而代碼，而top的值也是根據(jù)一樣的道理所得，這里就不做詳細(xì)解釋了。接下來(lái)就是在鼠標(biāo)運(yùn)動(dòng)的同時(shí)，放大圖像也要跟著改變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值上*比例就可以了。而加上負(fù)號(hào)的原因是默認(rèn)坐標(biāo)為(0,0)，而在移動(dòng)過(guò)程中，始坐標(biāo)只會(huì)向負(fù)方向移動(dòng)。
在該方法中有2個(gè)需要注意的地方：
1.
this.getElementsByTagName('div')[0].style.display = '';
應(yīng)該放在設(shè)置this.getElementsByTagName('div')[0]的top與left之前，原因是如果display為none的話，無(wú)法獲取其寬和高。如果把display = ''放在設(shè)置top與left之后，會(huì)出現(xiàn)一個(gè)奇怪的現(xiàn)象，大家可以試下，該問(wèn)題一直困擾了我很久，在多次嘗試中才發(fā)現(xiàn)問(wèn)題再這上面。奇怪現(xiàn)象如下：
2.
'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px';
這么長(zhǎng)的代碼可能讓人很困惑，我只是用Math.max()和Math.min()去避免了采用if語(yǔ)句，自己偷了點(diǎn)懶，就是為了實(shí)現(xiàn)瀏覽框不會(huì)超出原始圖像而已，仔細(xì)看看就清楚啦。
end方法很清晰，就是瀏覽框和放大框進(jìn)行隱藏。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript圖片放大效果詳解 [1] 下一頁(yè) JavaScript圖片放大效果詳解 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) JavaScript圖片放大效果詳解 [2]
