效果：
運(yùn)行代碼框
[ctrl+a 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
以前寫過一個jquery的圖片放大效果,但是存在著一些小問題,然后最近有時間重寫了一遍,做了很詳盡的改進(jìn).改進(jìn)了大部分bug,而且不采用jquery.
程序說明
主要為magnifier類,里面的主要方法有：
程序介紹
主要思維:當(dāng)鼠標(biāo)移入圖片的時候,放大層的div出現(xiàn),然后根據(jù)鼠標(biāo)移動狀況，改變放大層內(nèi)圖像的top值和left值，使得2個地方保持一致的現(xiàn)實(shí)。而2個圖像跟據(jù)比例進(jìn)行設(shè)置，width和height值，使之產(chǎn)生放大的效果，下面進(jìn)行詳細(xì)的解釋：
在init方法中，主要處理瀏覽框div層的大小，放大框的大小和放大的圖像大小。
瀏覽框div的width和height跟據(jù)，原始圖片的大小/比例值可以獲得，見代碼：
css(m.cont.getelementsbytagname('div')[0],{ //m.cont.getelementsbytagname('div')[0]為瀏覽框
'display' : 'none', //開始設(shè)置為不可見
'width' : m.cont.clientwidth / m.scale - borderwid + 'px', //原始圖片的寬/比例值 - border的寬度
'height' : m.cont.clientheight / m.scale - borderwid + 'px', ////原始圖片的高/比例值 - border的寬度
'opacity' : 0.5 //設(shè)置透明度
})
放大框的大小則設(shè)置為于原始圖像相同大小，代碼如下：
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', //放大框的位置為原始圖像的右方遠(yuǎn)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' //原始圖像的高*比例值
})
由于放大是根據(jù)比例進(jìn)行放大，所以在瀏覽框上和放大圖像上需要仔細(xì)計算，這也就是該程序的主要思維之一。
|||
在第一次寫的程序里，直接省去了onmouseover，因為直接使用onmousemove就可以滿足功能。而這次使用onmouseover是為了避免在使用過程中遇到select，在ie6下，select無法設(shè)置z-index值，使得放大框的突然出現(xiàn)卻無法覆蓋select。詳細(xì)下面在討論，
在move方法中，最重要的就是如果做到鼠標(biāo)移動過程中，瀏覽框隨著鼠標(biāo)移動的同時，放大圖像也跟著運(yùn)動,，使得放大圖像所顯示的范圍與瀏覽框所在原始圖像位置一致。
先說說瀏覽框跟隨鼠標(biāo)移動,主要代碼如下：
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=鼠標(biāo)x - this.offsetleft - 瀏覽框?qū)?2，所以跟據(jù)該幾何思想可以得出而代碼，而top的值也是根據(jù)一樣的道理所得，這里就不做詳細(xì)解釋了。接下來就是在鼠標(biāo)運(yùn)動的同時，放大圖像也要跟著改變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ù)號的原因是默認(rèn)坐標(biāo)為(0,0)，而在移動過程中，始坐標(biāo)只會向負(fù)方向移動。
在該方法中有2個需要注意的地方：
1.
this.getelementsbytagname('div')[0].style.display = '';
應(yīng)該放在設(shè)置this.getelementsbytagname('div')[0]的top與left之前，原因是如果display為none的話，無法獲取其寬和高。如果把display = ''放在設(shè)置top與left之后，會出現(xiàn)一個奇怪的現(xiàn)象，大家可以試下，該問題一直困擾了我很久，在多次嘗試中才發(fā)現(xià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';
這么長的代碼可能讓人很困惑，我只是用math.max()和math.min()去避免了采用if語句，自己偷了點(diǎn)懶，就是為了實(shí)現(xiàn)瀏覽框不會超出原始圖像而已，仔細(xì)看看就清楚啦。
end方法很清晰，就是瀏覽框和放大框進(jìn)行隱藏。
|||
[覆蓋select]
在為了在ie6下可以覆蓋select，我加入了2個放法createiframe和removeiframe。分別是在onmouseover事件里創(chuàng)建一個iframe和在onmouseout里銷毀iframe。
createiframe:function(elem){
var layer = document.createelement('iframe');
layer.tabindex = '-1';
layer.src = 'javascript:false;';
elem.parentnode.appendchild(layer);
layer.style.width = elem.offsetwidth + 'px';
layer.style.height = elem.offsetheight + 'px';
}
首先需要使用負(fù)的tabindex值把iframe排除在tab序列之外，否則用戶可能會使用鍵盤導(dǎo)航到它，這就亂了套了，所以需要將tabindex值設(shè)置為負(fù)的。另外，還要設(shè)置src，設(shè)置該值是為了避免在ssl頁面上出現(xiàn)問題.在ie中，沒有設(shè)置src的iframe將會自動裝載about:blank。ie將此視為不安全頁面，而且會產(chǎn)生一個警告對話框，內(nèi)容是“該頁面包含安全和非安全的內(nèi)容”。為了避免這個問題，可以將src設(shè)置為“javascript:false;”。(該段摘自<<javascript精髓>>)
而避免iframe在頁面所造成的混亂，所以在onmouseout中將iframe銷毀，而不對其進(jìn)行隱藏。
使用說明
由于時間上的問題，所以沒有封裝的太好，主要是在css上,最好根據(jù)我所設(shè)置的那樣設(shè)置，感覺有些亂。希望大家能夠理解，而修改也不會太難.因為我自帶一個css()函數(shù)，只要稍加設(shè)置就可以了。使用例子：
magnifier.init({
cont : document.getelementbyid('magnifier'),
img : document.getelementbyid('magnifierimg'),
mag : document.getelementbyid('mag'),
scale : 3
});
cont為container縮寫，指的是裝載原始圖像的div；
img則是放大的圖像；
mag則為magnifier縮寫,是指放大框；
scale為比例值，設(shè)置的值越大放大越大，但是這里有個問題就是如果不可以整除時，會產(chǎn)生些很小的白邊，目前不知道如何解決；
至于瀏覽框和原始圖像為m.cont.getelementsbytagname('img')[0]和m.cont.getelementsbytagname('div')[0],所以建議在裝載圖像的div中最好只放一個div和img。
ps：剛剛給源碼也加了注釋了，有些沒有的,大概在下面的代碼說明會有.this指針搞的好混亂~希望大家能看的明白什么回事..越用this越覺得不太好用啊..誒.>~搞了1個下午，累，休息下先哈。
新聞熱點(diǎn)
疑難解答
圖片精選
