|
|
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
[程序說明]
主要為magnifier類,里面的主要方法有:
init:運(yùn)行方法
start:則是鼠標(biāo)移入div的事件處理
move:則是鼠標(biāo)在div中移動的事件處理
end:鼠標(biāo)移出后的事件處理
[程序介紹]
主要思維:當(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ù),原始圖片的大小/比例值可以獲得,見代碼:
復(fù)制代碼 代碼如下:
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è)置為于原始圖像相同大小,代碼如下:
復(fù)制代碼 代碼如下:
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'
})
放大的圖像大小為,原始圖像大小*比例值,代碼如下:
復(fù)制代碼 代碼如下:
css(m.img,{
'position' : 'absolute',
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始圖像的寬*比例值
'height' : (m.cont.clientHeight * m.scale) + 'px' //原始圖像的高*比例值
})
由于放大是根據(jù)比例進(jìn)行放大,所以在瀏覽框上和放大圖像上需要仔細(xì)計(jì)算,這也就是該程序的主要思維之一.
在第一次寫的程序里,直接省去了onmouseover,因?yàn)橹苯邮褂胦nmousemove就可以滿足功能.而這次使用onmouseover是為了避免在使用過程中遇到select,在IE6下,select無法設(shè)置z-Index值,使得放大框的突然出現(xiàn)卻無法覆蓋select.詳細(xì)下面在討論.
在move方法中,最重要的就是如果做到鼠標(biāo)移動過程中,瀏覽框隨著鼠標(biāo)移動的同時,放大圖像也跟著運(yùn)動,使得放大圖像所顯示的范圍與瀏覽框所在原始圖像位置一致 .
先說說瀏覽框跟隨鼠標(biāo)移動,主要代碼如下:
復(fù)制代碼 代碼如下:
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值,代碼如下:
復(fù)制代碼 代碼如下:
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.
復(fù)制代碼 代碼如下:
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.
復(fù)制代碼 代碼如下:
'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.
復(fù)制代碼 代碼如下:
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è)置就可以了.使用例子:
復(fù)制代碼 代碼如下:
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.
[程序代碼]
復(fù)制代碼 代碼如下:
function getEventObject(W3CEvent) { //事件標(biāo)準(zhǔn)化函數(shù)
return W3CEvent || window.event;
}
function getPointerPosition(e) { //兼容瀏覽器的鼠標(biāo)x,y獲得函數(shù)
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) { //兼容瀏覽器設(shè)置透明值
if(elem.filters) {
elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} else {
elem.style.opacity = level;
}
}
function css(elem,prop) { //css設(shè)置函數(shù),可以方便設(shè)置css值,并且兼容設(shè)置透明值
for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem,prop[i]);
} else {
elem.style[i] = prop[i];
}
}
return elem;
}
var magnifier = {
m : null,
init:function(magni){
var m = this.m = magni || {
cont : null, //裝載原始圖像的div
img : null, //放大的圖像
mag : null, //放大框
scale : 15 //比例值,設(shè)置的值越大放大越大,但是這里有個問題就是如果不可以整除時,會產(chǎn)生些很小的白邊,目前不知道如何解決
}
css(m.img,{
'position' : 'absolute',
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始圖像的寬*比例值
'height' : (m.cont.clientHeight * m.scale) + 'px' //原始圖像的高*比例值
})
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'
})
var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //獲取border的寬
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è)置透明度
})
m.img.src = m.cont.getElementsByTagName('img')[0].src; //讓原始圖像的src值給予放大圖像
m.cont.style.cursor = 'crosshair';
m.cont.onmouseover = magnifier.start;
},
start:function(e){
if(document.all){ //只在IE下執(zhí)行,主要避免IE6的select無法覆蓋
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove = magnifier.move; //this指向m.cont
this.onmouseout = magnifier.end;
},
move:function(e){
var pos = getPointerPosition(e); //事件標(biāo)準(zhǔn)化
this.getElementsByTagName('div')[0].style.display = '';
css(this.getElementsByTagName('div')[0],{
'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',
'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠標(biāo)x - this.offsetLeft - 瀏覽框?qū)?2,Math.max和Math.min讓瀏覽框不會超出圖像
})
magnifier.m.mag.style.display = '';
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'
})
},
end:function(e){
this.getElementsByTagName('div')[0].style.display = 'none';
magnifier.removeIframe(magnifier.m.img); //銷毀iframe
magnifier.m.mag.style.display = 'none';
},
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';
},
removeIframe:function(elem){
var layers = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
layers[0].parentNode.removeChild(layers[0]);
}
}
}
文件打包下載
JavaScript技術(shù)：JavaScript 圖片放大效果及代碼說明，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
