主要擴(kuò)展了原圖和顯示框的展示模式，有以下幾種模式：
"follow" 跟隨模式：顯示框能跟隨鼠標(biāo)移動的效果；
"handle" 拖柄模式：原圖上有一個(gè)拖柄來標(biāo)記顯示范圍；
"cropper" 切割模式：原圖用不透明的來標(biāo)記顯示范圍，其他部分用半透明顯示；
"handle-cropper" 拖柄切割模式：拖柄模式和切割模式的混合版，同時(shí)用透明度和拖柄來標(biāo)記顯示范圍。
當(dāng)然更多的擴(kuò)展等待你的想象力來發(fā)掘。
兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1

程序說明

【擴(kuò)展模式】

上次ImagesLazyLoad使用了繼承做擴(kuò)展，這次用插件的形式來做擴(kuò)展。

先看看基礎(chǔ)模式，這些模式是保存在ImageZoom._MODE中的，類似這樣的結(jié)構(gòu)：


其中模式名就是基礎(chǔ)模式的名字，options是可選參數(shù)擴(kuò)展，methods是程序結(jié)構(gòu)的擴(kuò)展。
基礎(chǔ)模式包含"follow", "handle"和"cropper"模式，后面再詳細(xì)介紹。
methods包含要擴(kuò)展的鉤子程序，是擴(kuò)展的主要部分。
ps：這里說的模式不是“設(shè)計(jì)模式”里面的模式。

擴(kuò)展需要在程序初始化時(shí)進(jìn)行，要放在_initialize程序之前執(zhí)行。
為了不影響原程序的結(jié)構(gòu)，這里用織入法在_initialize之前插入一段程序：


原理就是先保存原來的函數(shù)，插入一段程序組成新函數(shù)，然后重新替換原來的函數(shù)。

考慮到組合基礎(chǔ)模式的情況，使用了一個(gè)對象保存真正使用的模式：

可以看到"handle-cropper"模式其實(shí)就是"handle"和"cropper"的組合模式。

插入的程序的主要任務(wù)是根據(jù)設(shè)定好的基礎(chǔ)模式，進(jìn)行擴(kuò)展：

首先擴(kuò)展options可選參數(shù)對象，由于可選參數(shù)是第三個(gè)參數(shù)，所以用arguments[2]獲取。
extend的第三個(gè)參數(shù)設(shè)為false，說明不重寫相同屬性，即保留自定義的屬性值。
然后把methods里面的方法作為鉤子函數(shù)逐個(gè)添加到程序中。

methods可以包含init, load, start, repair, move, end, dispose這幾個(gè)方法，分別對應(yīng)ImageZoom中初始化、加載、開始、修正、移動、結(jié)束和銷毀事件。
在擴(kuò)展時(shí)，不同的事件執(zhí)行不同的任務(wù)：
init初始化函數(shù)：用來設(shè)置擴(kuò)展需要的屬性，注意這些屬性不要跟ImageZoom本身的屬性沖突了，即重名。
load加載函數(shù)：圖片加載完成，相關(guān)參數(shù)也設(shè)置完成，主要做執(zhí)行放大效果前的準(zhǔn)備工作。
start開始函數(shù)：觸發(fā)放大效果時(shí)執(zhí)行的。
repair修正函數(shù)：用于修正大圖定位的坐標(biāo)值。
move移動函數(shù)：觸發(fā)放大效果后，鼠標(biāo)移動時(shí)執(zhí)行的。
end結(jié)束函數(shù)就：結(jié)束放大效果時(shí)執(zhí)行的。
dispose銷毀函數(shù)：在移除程序時(shí)清理程序的。
ps：具體位置參考ImageZoom中使用$$CE.fireEvent的部分。

可以看到這里用了織入法（weave）和鉤子法（hook）對程序做擴(kuò)展。
織入法是一種aop，可以在不改變原程序的基礎(chǔ)上進(jìn)行擴(kuò)展，但只能在函數(shù)前面或后面加入程序。
而鉤子法必須在原程序中設(shè)置好對應(yīng)鉤子才能配合使用，但位置相對靈活。


【跟隨模式】

在"follow"跟隨模式中，進(jìn)行放大時(shí)，顯示框會跟隨鼠標(biāo)移動，就像拿著放大鏡看的效果。

首先顯示框要絕對定位，要實(shí)現(xiàn)顯示框跟隨鼠標(biāo)移動，只要在move中設(shè)置對應(yīng)的left/top就行了：


var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
其中pageX/pageY是鼠標(biāo)當(dāng)前的坐標(biāo)，_repairFollowLeft/_repairFollowTop是坐標(biāo)的修正參數(shù)。

修正參數(shù)是在load中設(shè)置的，如果顯示框隱藏的話，用上一篇獲取顯示范圍的方法獲取參數(shù)：

為了跟隨時(shí)，讓鼠標(biāo)固定在顯示框中心位置，先根據(jù)顯示框的offsetWidth/offsetHeight修正參數(shù)：

如果顯示框的offsetParent不是body，還需要根據(jù)offsetParent修正坐標(biāo)：

ps：在Maxthon測試時(shí)發(fā)現(xiàn)body子元素的offsetParent不是body而是html。

為了在移除程序后，能恢復(fù)顯示框的樣式，在load程序中做了樣式的備份：

并在dispose中恢復(fù)：

$$D.setStyle( this._viewer, this._stylesFollow );

現(xiàn)在已經(jīng)達(dá)到了基本的效果，但由于大圖移動范圍的限制，當(dāng)鼠標(biāo)移動到接近邊界時(shí)，大圖就卡住不會動了。
為了實(shí)現(xiàn)在鼠標(biāo)移動時(shí)，大圖會持續(xù)變化的效果，在repair中修正了移動坐標(biāo)：

原理稍有些復(fù)雜，以水平坐標(biāo)為例，先看下圖：

大方框代表大圖對象，小方框代表顯示框。
當(dāng)前位置是根據(jù)鼠標(biāo)坐標(biāo)得到的實(shí)際顯示的位置，目標(biāo)位置想要實(shí)現(xiàn)效果的位置。
有一些物理或幾何知識應(yīng)該明白這個(gè)等式：x / y = m / n
可以推出：y = x * n / m = x * ( zoom.width - viewerWidth ) / zoom.height
x當(dāng)前坐標(biāo)可以通過pos.left來得到：x = viewerWidth / 2 - pos.left
最后得到:left = -y = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 )
垂直坐標(biāo)也差不多。


【拖柄模式】

拖柄是一個(gè)層，在原圖上面，用來表示顯示范圍在原圖的位置和范圍。
顯示范圍可以根據(jù)_rangeWidth/_rangeHeight獲取。
至于位置的指定可以根據(jù)鼠標(biāo)坐標(biāo)或大圖定位坐標(biāo)來設(shè)置。
如果鼠標(biāo)坐標(biāo)的話還必須做其他處理，例如范圍控制，而根據(jù)大圖定位坐標(biāo)相對就方便準(zhǔn)確得多，程序也是用后面一個(gè)方法。

首先在init定義一個(gè)_handle拖柄對象：

如果沒有自定義拖柄對象，會復(fù)制顯示框作為拖柄對象。
對于自動生成的拖柄對象，會添加"_createbyhandle"屬性作標(biāo)記，方便在dispose中移除。

在load時(shí)，設(shè)置拖柄樣式：

絕對定位是必須的，并根據(jù)_rangeWidth/_rangeHeight設(shè)置尺寸。
設(shè)置display和visibility是為了下面獲取參數(shù)。

先根據(jù)原圖坐標(biāo)獲取修正參數(shù)：


this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;

和跟隨模式類似，也要做offsetParent定位的修正：


然后重新隱藏：

$$D.setStyle( handle, { display: "none", visibility: "visible" });

在start時(shí)，顯示拖柄對象。

在move時(shí)，根據(jù)大圖定位坐標(biāo)設(shè)置拖柄定位：


在end時(shí)，隱藏拖柄對象。


【切割模式】

“切割”就是選擇的部分全透明，其他部分半透明的效果。
主要通過clip來實(shí)現(xiàn)，具體原理可以看圖片切割效果。

為了實(shí)現(xiàn)切割效果，需要在init中新建一個(gè)_cropper切割層：


并在load中設(shè)置這個(gè)切割層：


差不多是復(fù)制一個(gè)原圖對象，并且絕對定位到原圖對象上面。

在start時(shí)，顯示切割層，并根據(jù)透明度設(shè)置原圖為半透明狀態(tài)。

在move時(shí)，根據(jù)大圖移動的坐標(biāo)設(shè)置切割層要clip的范圍：

在end時(shí)，隱藏切割層，并重新設(shè)置原圖為不透明，來恢復(fù)原來的狀態(tài)。

還要記得在dispose中移除切割層。


使用技巧

需要擴(kuò)展的效果時(shí)才需要添加這個(gè)擴(kuò)展程序。

可自行對ImageZoom._MODE進(jìn)行擴(kuò)展，擴(kuò)展后記得在modes添加對應(yīng)模式。

可以組合多個(gè)基礎(chǔ)模式同時(shí)使用，具體參考"handle-cropper"模式。


使用說明

使用方法跟ImageZoom差不多，只是多了一個(gè)可選參考mode設(shè)置顯示模式。
使用"handle"模式時(shí)，可選參數(shù)的"handle"屬性可以設(shè)置拖柄對象。
使用"cropper"模式時(shí)，可選參數(shù)的"opacity"屬性可以設(shè)置透明度。
使用"handle-cropper"模式時(shí)，以上兩個(gè)參數(shù)都可以使用。
程序源碼

在線演示地址http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm
打包下載地址http://www.dbjr.com.cn/jiaoben/25809.html
出處：http://www.cnblogs.com/cloudgamer/

最新評論