|
[覆蓋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è)置，感覺有些亂。希望大家能夠理解，而修改也不會太難.因?yàn)槲易詭б粋�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個下午，累，休息下先哈。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2954073-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/7087.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript圖片放大效果詳解 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 JavaScript圖片放大效果詳解 [3]
