圖片放大效果

1、以前寫(xiě)過(guò)一個(gè)jQuery的圖片放大效果,但是存在著一些小問(wèn)題,然后最近有時(shí)間重寫(xiě)了一遍,做了很詳盡的改進(jìn).改進(jìn)了大部分bug,而且不采用jQuery.程序說(shuō)明主要為magnifier類,里面的主要方法有:init:運(yùn)行方法start:則是鼠標(biāo)移入div的事件處理move:則是鼠標(biāo)在div中移動(dòng)的事件處理end:鼠標(biāo)移出后的事件處理程序介紹主要思維:當(dāng)鼠標(biāo)移入圖片的時(shí)候,放大層的DIV出現(xiàn),然后根據(jù)鼠標(biāo)移動(dòng)狀況,改變放大層內(nèi)圖像的top值和left值.使得2個(gè)地方保持一致的現(xiàn)實(shí).而2個(gè)圖像跟據(jù)比例進(jìn)行設(shè)置,width和height值,使之產(chǎn)生放大的效果.下面進(jìn)行詳細(xì)的解釋:在init方法中,主要

2、處理瀏覽框div層的大小,放大框的大小和放大的圖像大小.瀏覽框div的width和height跟據(jù),原始圖片的大小/比例值可以獲得,見(jiàn)代碼: 復(fù)制內(nèi)容到剪貼板 代碼:css(m.cont.getElementsByTagName('div')0,        /m.cont.getElementsByTagName('div')0為瀏覽框    'display' : 'none',  &#

3、160;             /開(kāi)始設(shè)置為不可見(jiàn)    'width' : m.cont.clientWidth / m.scale - borderWid + 'px',    /原始圖片的寬/比例值 - border的寬度    'height' : m.cont.clientHeight /

4、 m.scale - borderWid + 'px',    /原始圖片的高/比例值 - border的寬度    'opacity' : 0.5                    /設(shè)置透明度)放大框的大小則設(shè)置為于原始圖像相同大小,代碼如下: 復(fù)制內(nèi)容到剪貼板 代碼:css(m

5、.mag,    'display' : 'none',    'width' : m.cont.clientWidth + 'px',        /m.cont為原始圖像    'height' : m.cont.clientHeight + 'px',   

6、0;'position' : 'absolute',    'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',    /放大框的位置為原始圖像的右方遠(yuǎn)10px    'top' : m.cont.offsetTop + 'px')放大的圖像大小為,原始圖像大小*比例值,代碼如下: 復(fù)制內(nèi)容到剪貼板 代碼:css(

7、m.img,    'position' : 'absolute',    'width' : (m.cont.clientWidth * m.scale) + 'px',    /原始圖像的寬*比例值    'height' : (m.cont.clientHeight * m.scale) + 'px'   

8、 /原始圖像的高*比例值)由于放大是根據(jù)比例進(jìn)行放大,所以在瀏覽框上和放大圖像上需要仔細(xì)計(jì)算,這也就是該程序的主要思維之一.在第一次寫(xiě)的程序里,直接省去了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)

9、,主要代碼如下: 復(fù)制內(nèi)容到剪貼板 代碼:top:pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')0.style.height) / 2left: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ù)該幾

10、何思想可以得出而代碼,而top的值也是根據(jù)一樣的道理所得,這里就不做詳細(xì)解釋了.接下來(lái)就是在鼠標(biāo)運(yùn)動(dòng)的同時(shí),放大圖像也要跟著改變top和left值,代碼如下: 復(fù)制內(nèi)容到剪貼板 代碼:css(magnifier.m.img,    'top' : - (parseInt(this.getElementsByTagName('div')0.style.top) * magnifier.m.scale) + 'px',    'left' : - (par

11、seInt(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. 復(fù)制內(nèi)容到剪貼板 代碼:this.getElementsByTagName('div')0.style.display = ''應(yīng)該放在設(shè)置this.getElementsByTagN

12、ame('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. 復(fù)制內(nèi)容到剪貼板 代碼:'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')0.style.height) / 2,0),thi

13、s.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)行隱藏.覆蓋select在為了在IE6下可以覆蓋select,我加入了2個(gè)放法createIframe和removeIframe.分別是在onmouseover事件里創(chuàng)建一個(gè)iframe和在onmouseout里銷毀

14、iframe. 復(fù)制內(nèi)容到剪貼板 代碼:createIframe:function(elem)    var layer = document.createElement('iframe');    layer.tabIndex = '-1'    layer.src = 'javascript:false;'    elem.parentNode.appendChild(layer);&

15、#160;           layer.style.width = elem.offsetWidth + 'px'    layer.style.height = elem.offsetHeight + 'px'首先需要使用負(fù)的tabIndex值把iframe排除在tab序列之外,否則用戶可能會(huì)使用鍵盤導(dǎo)航到它,這就亂了套了,所以需要將tabIndex值設(shè)置為負(fù)的.另外,還要設(shè)置src,設(shè)置該值是為了避免在SS

16、L頁(yè)面上出現(xiàn)問(wèn)題.在IE中,沒(méi)有設(shè)置src的iframe將會(huì)自動(dòng)裝載about:blank.IE將此視為不安全頁(yè)面,而且會(huì)產(chǎn)生一個(gè)警告對(duì)話框,內(nèi)容是"該頁(yè)面包含安全和非安全的內(nèi)容".為了避免這個(gè)問(wèn)題,可以將src設(shè)置為"javascript:false;".(該段摘自<<JavaScript精髓>>)而避免iframe在頁(yè)面所造成的混亂,所以在onmouseout中將iframe銷毀,而不對(duì)其進(jìn)行隱藏.使用說(shuō)明由于時(shí)間上的問(wèn)題,所以沒(méi)有封裝的太好,主要是在CSS上,最好根據(jù)我所設(shè)置的那樣設(shè)置,感覺(jué)有些亂.希望大家能夠理解,而修改也

17、不會(huì)太難.因?yàn)槲易詭б粋€(gè)css()函數(shù),只要稍加設(shè)置就可以了.使用例子: 復(fù)制內(nèi)容到剪貼板 代碼:magnifier.init(    cont : document.getElementById('magnifier'),    img : document.getElementById('magnifierImg'),    mag : document.getElementById('mag'),    scale : 3);cont為container縮寫(xiě),指的是裝載原始圖像的divimg則是放大的圖像mag則為magnifier縮寫(xiě),是指放大框scale為比例