|
效果：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
以前寫過一個(gè)jQuery的圖片放大效果,但是存在著一些小問題,然后最近有時(shí)間重寫了一遍,做了很詳盡的改進(jìn).改進(jìn)了大部分bug,而且不采用jQuery.
程序說明
主要為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ù)，原始圖片的大小/比例值可以獲得，見代碼：
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ì)計(jì)算，這也就是該程序的主要思維之一。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 JavaScript圖片放大效果詳解 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 JavaScript圖片放大效果詳解 [1]
第 2 頁 
