JavaScript 圖片放大效果及代碼說(shuō)明

更新時(shí)間：2009年10月24日 01:29:35 作者：

JavaScript 圖片放大效果及代碼說(shuō)明 ,想要學(xué)習(xí)的朋友可以參考下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Magnifier</title> <style type="text/css"> #magnifier{     width:342px;     height:420px;     position:absolute;     top:100px;     left:250px;     font-size:0;     border:1px solid #000; } #img{     width:342px;     height:420px; } #Browser{     border:1px solid #000;     z-index:100;     position:absolute;     background:#555; } #mag{     border:1px solid #000;     overflow:hidden;     z-index:100; } </style>  </head> <body> <div   class="vvxyksv9kd"   id="magnifier"> <img src="/upload/20091024012932942.jpg" id="img" /> <div   class="vvxyksv9kd"   id="Browser"></div> </div> <div   class="vvxyksv9kd"   id="mag"><img id="magnifierImg" /></div> <select style="position:absolute;top:200px;left:650px;width:100px;"> <option>select測(cè)試</option> <option>是否能覆蓋</option> </select> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

[程序說(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方法中,主要處理瀏覽框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無(wú)法設(shè)置z-Index值,使得放大框的突然出現(xiàn)卻無(wú)法覆蓋select.詳細(xì)下面在討論.

在move方法中,最重要的就是如果做到鼠標(biāo)移動(dòng)過程中,瀏覽框隨著鼠標(biāo)移動(dòng)的同時(shí),放大圖像也跟著運(yùn)動(dòng),使得放大圖像所顯示的范圍與瀏覽框所在原始圖像位置一致 .
先說(shuō)說(shuō)瀏覽框跟隨鼠標(biāo)移動(dòng),主要代碼如下:

復(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 

由于是,對(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值,代碼如下:

復(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ù)號(hào)的原因是默認(rèn)坐標(biāo)為(0,0),而在移動(dòng)過程中,始坐標(biāo)只會(huì)向負(fù)方向移動(dòng).
在該方法中有2個(gè)需要注意的地方:
1.

復(fù)制代碼代碼如下:

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)象,大家可以試下,該問題一直困擾了我很久,在多次嘗試中才發(fā)現(xiàn)問題再這上面,現(xiàn)象如下:

復(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'; 

這么長(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里銷毀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序列之外,否則用戶可能會(huì)使用鍵盤導(dǎo)航到它,這就亂了套了,所以需要將tabIndex值設(shè)置為負(fù)的.另外,還要設(shè)置src,設(shè)置該值是為了避免在SSL頁(yè)面上出現(xiàn)問題.在IE中,沒有設(shè)置src的iframe將會(huì)自動(dòng)裝載about:blank.IE將此視為不安全頁(yè)面,而且會(huì)產(chǎn)生一個(gè)警告對(duì)話框,內(nèi)容是"該頁(yè)面包含安全和非安全的內(nèi)容".為了避免這個(gè)問題,可以將src設(shè)置為"javascript:false;".(該段摘自<<JavaScript精髓>>)
而避免iframe在頁(yè)面所造成的混亂,所以在onmouseout中將iframe銷毀,而不對(duì)其進(jìn)行隱藏.
[使用說(shuō)明]
由于時(shí)間上的問題,所以沒有封裝的太好,主要是在CSS上,最好根據(jù)我所設(shè)置的那樣設(shè)置,感覺有些亂.希望大家能夠理解,而修改也不會(huì)太難.因?yàn)槲易詭б粋€(gè)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è)置的值越大放大越大,但是這里有個(gè)問題就是如果不可以整除時(shí),會(huì)產(chǎn)生些很小的白邊,目前不知道如何解決
至于瀏覽框和原始圖像為m.cont.getElementsByTagName('img')[0]和m.cont.getElementsByTagName('div')[0],所以建議在裝載圖像的div中最好只放一個(gè)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è)置的值越大放大越大,但是這里有個(gè)問題就是如果不可以整除時(shí),會(huì)產(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無(wú)法覆蓋 
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讓瀏覽框不會(huì)超出圖像 
}) 

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]); 
} 
} 
} 