ImageZoom 圖片放大鏡效果（多功能擴(kuò)展篇）
更新時(shí)間：2010年04月14日 09:39:37 作者：
上一篇ImageZoom已經(jīng)對(duì)圖片放大效果做了詳細(xì)的分析，這次在ImageZoom的基礎(chǔ)上進(jìn)行擴(kuò)展，實(shí)現(xiàn)更多的效果。
主要擴(kuò)展了原圖和顯示框的展示模式，有以下幾種模式：
"follow" 跟隨模式：顯示框能跟隨鼠標(biāo)移動(dòng)的效果；
"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)：
ImageZoom._MODE = {
模式名: {
options: {
...
},
methods: {
init: function() {
...
},
...
}
},
...
}
其中模式名就是基礎(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之前插入一段程序：
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
...;
return function(){
...
init.apply( this, arguments );
}
})();
原理就是先保存原來的函數(shù)，插入一段程序組成新函數(shù)，然后重新替換原來的函數(shù)。
考慮到組合基礎(chǔ)模式的情況，使用了一個(gè)對(duì)象保存真正使用的模式：
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
可以看到"handle-cropper"模式其實(shí)就是"handle"和"cropper"的組合模式。
插入的程序的主要任務(wù)是根據(jù)設(shè)定好的基礎(chǔ)模式，進(jìn)行擴(kuò)展：
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
$$.extend( options, mode.options, false );
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
首先擴(kuò)展options可選參數(shù)對(duì)象，由于可選參數(shù)是第三個(gè)參數(shù)，所以用arguments[2]獲取。
extend的第三個(gè)參數(shù)設(shè)為false，說明不重寫相同屬性，即保留自定義的屬性值。
然后把methods里面的方法作為鉤子函數(shù)逐個(gè)添加到程序中。
methods可以包含init, load, start, repair, move, end, dispose這幾個(gè)方法，分別對(duì)應(yīng)ImageZoom中初始化、加載、開始、修正、移動(dòng)、結(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移動(dòng)函數(shù)：觸發(fā)放大效果后，鼠標(biāo)移動(dòng)時(shí)執(zhí)行的。
end結(jié)束函數(shù)就：結(jié)束放大效果時(shí)執(zhí)行的。
dispose銷毀函數(shù)：在移除程序時(shí)清理程序的。
ps：具體位置參考ImageZoom中使用$$CE.fireEvent的部分。
可以看到這里用了織入法（weave）和鉤子法（hook）對(duì)程序做擴(kuò)展。
織入法是一種aop，可以在不改變?cè)绦虻幕A(chǔ)上進(jìn)行擴(kuò)展，但只能在函數(shù)前面或后面加入程序。
而鉤子法必須在原程序中設(shè)置好對(duì)應(yīng)鉤子才能配合使用，但位置相對(duì)靈活。
【跟隨模式】
在"follow"跟隨模式中，進(jìn)行放大時(shí)，顯示框會(huì)跟隨鼠標(biāo)移動(dòng)，就像拿著放大鏡看的效果。
首先顯示框要絕對(duì)定位，要實(shí)現(xiàn)顯示框跟隨鼠標(biāo)移動(dòng)，只要在move中設(shè)置對(duì)應(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ù)：
if ( !viewer.offsetWidth ) {
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
...
if ( styles ) { $$D.setStyle( viewer, styles ); }
為了跟隨時(shí)，讓鼠標(biāo)固定在顯示框中心位置，先根據(jù)顯示框的offsetWidth/offsetHeight修正參數(shù)：
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
如果顯示框的offsetParent不是body，還需要根據(jù)offsetParent修正坐標(biāo)：
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
ps：在Maxthon測試時(shí)發(fā)現(xiàn)body子元素的offsetParent不是body而是html。
為了在移除程序后，能恢復(fù)顯示框的樣式，在load程序中做了樣式的備份：
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
并在dispose中恢復(fù)：
$$D.setStyle( this._viewer, this._stylesFollow );
現(xiàn)在已經(jīng)達(dá)到了基本的效果，但由于大圖移動(dòng)范圍的限制，當(dāng)鼠標(biāo)移動(dòng)到接近邊界時(shí)，大圖就卡住不會(huì)動(dòng)了。
為了實(shí)現(xiàn)在鼠標(biāo)移動(dòng)時(shí)，大圖會(huì)持續(xù)變化的效果，在repair中修正了移動(dòng)坐標(biāo)：
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
原理稍有些復(fù)雜，以水平坐標(biāo)為例，先看下圖：
大方框代表大圖對(duì)象，小方框代表顯示框。
當(dāng)前位置是根據(jù)鼠標(biāo)坐標(biāo)得到的實(shí)際顯示的位置，目標(biāo)位置想要實(shí)現(xiàn)效果的位置。
有一些物理或幾何知識(shí)應(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)相對(duì)就方便準(zhǔn)確得多，程序也是用后面一個(gè)方法。
首先在init定義一個(gè)_handle拖柄對(duì)象：
var handle = $$( this.options.handle );
if ( !handle ) {
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
如果沒有自定義拖柄對(duì)象，會(huì)復(fù)制顯示框作為拖柄對(duì)象。
對(duì)于自動(dòng)生成的拖柄對(duì)象，會(huì)添加"_createbyhandle"屬性作標(biāo)記，方便在dispose中移除。
在load時(shí)，設(shè)置拖柄樣式：
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
絕對(duì)定位是必須的，并根據(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定位的修正：
if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
然后重新隱藏：
$$D.setStyle( handle, { display: "none", visibility: "visible" });
在start時(shí)，顯示拖柄對(duì)象。
在move時(shí)，根據(jù)大圖定位坐標(biāo)設(shè)置拖柄定位：
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
在end時(shí)，隱藏拖柄對(duì)象。
【切割模式】
“切割”就是選擇的部分全透明，其他部分半透明的效果。
主要通過clip來實(shí)現(xiàn)，具體原理可以看圖片切割效果。
為了實(shí)現(xiàn)切割效果，需要在init中新建一個(gè)_cropper切割層：
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
并在load中設(shè)置這個(gè)切割層：
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
差不多是復(fù)制一個(gè)原圖對(duì)象，并且絕對(duì)定位到原圖對(duì)象上面。
在start時(shí)，顯示切割層，并根據(jù)透明度設(shè)置原圖為半透明狀態(tài)。
在move時(shí)，根據(jù)大圖移動(dòng)的坐標(biāo)設(shè)置切割層要clip的范圍：
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
在end時(shí)，隱藏切割層，并重新設(shè)置原圖為不透明，來恢復(fù)原來的狀態(tài)。
還要記得在dispose中移除切割層。
使用技巧
需要擴(kuò)展的效果時(shí)才需要添加這個(gè)擴(kuò)展程序。
可自行對(duì)ImageZoom._MODE進(jìn)行擴(kuò)展，擴(kuò)展后記得在modes添加對(duì)應(yīng)模式。
可以組合多個(gè)基礎(chǔ)模式同時(shí)使用，具體參考"handle-cropper"模式。
使用說明
使用方法跟ImageZoom差不多，只是多了一個(gè)可選參考mode設(shè)置顯示模式。
使用"handle"模式時(shí)，可選參數(shù)的"handle"屬性可以設(shè)置拖柄對(duì)象。
使用"cropper"模式時(shí)，可選參數(shù)的"opacity"屬性可以設(shè)置透明度。
使用"handle-cropper"模式時(shí)，以上兩個(gè)參數(shù)都可以使用。
程序源碼
ImageZoom._MODE = {
//跟隨
"follow": {
methods: {
init: function() {
this._stylesFollow = null;//備份樣式
this._repairFollowLeft = 0;//修正坐標(biāo)left
this._repairFollowTop = 0;//修正坐標(biāo)top
},
load: function() {
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
viewer.style.position = "absolute";
//獲取修正參數(shù)
if ( !viewer.offsetWidth ) {//隱藏
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
//修正中心位置
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
//修正offsetParent位置
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
if ( styles ) { $$D.setStyle( viewer, styles ); }
},
repair: function(e, pos) {
var zoom = this._zoom,
viewerWidth = this._viewerWidth,
viewerHeight = this._viewerHeight;
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
},
move: function(e) {
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
},
dispose: function() {
$$D.setStyle( this._viewer, this._stylesFollow );
}
}
},
//拖柄
"handle": {
options: {//默認(rèn)值
handle: ""http://拖柄對(duì)象
},
methods: {
init: function() {
var handle = $$( this.options.handle );
if ( !handle ) {//沒有定義的話用復(fù)制顯示框代替
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;//生成標(biāo)識(shí)用于移除
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
this._handle = handle;
this._repairHandleLeft = 0;//修正坐標(biāo)left
this._repairHandleTop = 0;//修正坐標(biāo)top
},
load: function() {
var handle = this._handle, rect = this._rect;
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
//獲取修正參數(shù)
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
//修正offsetParent位置
if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
//隱藏
$$D.setStyle( handle, { display: "none", visibility: "visible" });
},
start: function() {
this._handle.style.display = "block";
},
move: function(e, x, y) {
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
},
end: function() {
this._handle.style.display = "none";
},
dispose: function() {
if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); }
this._handle = null;
}
}
},
//切割
"cropper": {
options: {//默認(rèn)值
opacity: .5//透明度
},
methods: {
init: function() {
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
this._cropper = cropper;
this.opacity = this.options.opacity;
},
load: function() {
var cropper = this._cropper, image = this._image, rect = this._rect;
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
},
start: function() {
this._cropper.style.display = "block";
$$D.setStyle( this._image, "opacity", this.opacity );
},
move: function(e, x, y) {
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
},
end: function() {
$$D.setStyle( this._image, "opacity", 1 );
this._cropper.style.display = "none";
},
dispose: function() {
document.body.removeChild( this._cropper );
this._cropper = null;
}
}
}
}
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
return function(){
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
//擴(kuò)展options
$$.extend( options, mode.options, false );
//擴(kuò)展鉤子
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
init.apply( this, arguments );
}
})();
在線演示地址http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm
打包下載地址http://www.dhdzp.com/jiaoben/25809.html
出處：http://www.cnblogs.com/cloudgamer/
"follow" 跟隨模式：顯示框能跟隨鼠標(biāo)移動(dòng)的效果；
"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)：
復(fù)制代碼 代碼如下:
ImageZoom._MODE = {
模式名: {
options: {
...
},
methods: {
init: function() {
...
},
...
}
},
...
}
其中模式名就是基礎(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之前插入一段程序：
復(fù)制代碼 代碼如下:
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
...;
return function(){
...
init.apply( this, arguments );
}
})();
原理就是先保存原來的函數(shù)，插入一段程序組成新函數(shù)，然后重新替換原來的函數(shù)。
考慮到組合基礎(chǔ)模式的情況，使用了一個(gè)對(duì)象保存真正使用的模式：
復(fù)制代碼 代碼如下:
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
可以看到"handle-cropper"模式其實(shí)就是"handle"和"cropper"的組合模式。
插入的程序的主要任務(wù)是根據(jù)設(shè)定好的基礎(chǔ)模式，進(jìn)行擴(kuò)展：
復(fù)制代碼 代碼如下:
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
$$.extend( options, mode.options, false );
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
首先擴(kuò)展options可選參數(shù)對(duì)象，由于可選參數(shù)是第三個(gè)參數(shù)，所以用arguments[2]獲取。
extend的第三個(gè)參數(shù)設(shè)為false，說明不重寫相同屬性，即保留自定義的屬性值。
然后把methods里面的方法作為鉤子函數(shù)逐個(gè)添加到程序中。
methods可以包含init, load, start, repair, move, end, dispose這幾個(gè)方法，分別對(duì)應(yīng)ImageZoom中初始化、加載、開始、修正、移動(dòng)、結(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移動(dòng)函數(shù)：觸發(fā)放大效果后，鼠標(biāo)移動(dòng)時(shí)執(zhí)行的。
end結(jié)束函數(shù)就：結(jié)束放大效果時(shí)執(zhí)行的。
dispose銷毀函數(shù)：在移除程序時(shí)清理程序的。
ps：具體位置參考ImageZoom中使用$$CE.fireEvent的部分。
可以看到這里用了織入法（weave）和鉤子法（hook）對(duì)程序做擴(kuò)展。
織入法是一種aop，可以在不改變?cè)绦虻幕A(chǔ)上進(jìn)行擴(kuò)展，但只能在函數(shù)前面或后面加入程序。
而鉤子法必須在原程序中設(shè)置好對(duì)應(yīng)鉤子才能配合使用，但位置相對(duì)靈活。
【跟隨模式】
在"follow"跟隨模式中，進(jìn)行放大時(shí)，顯示框會(huì)跟隨鼠標(biāo)移動(dòng)，就像拿著放大鏡看的效果。
首先顯示框要絕對(duì)定位，要實(shí)現(xiàn)顯示框跟隨鼠標(biāo)移動(dòng)，只要在move中設(shè)置對(duì)應(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ù)：
復(fù)制代碼 代碼如下:
if ( !viewer.offsetWidth ) {
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
...
if ( styles ) { $$D.setStyle( viewer, styles ); }
為了跟隨時(shí)，讓鼠標(biāo)固定在顯示框中心位置，先根據(jù)顯示框的offsetWidth/offsetHeight修正參數(shù)：
復(fù)制代碼 代碼如下:
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
如果顯示框的offsetParent不是body，還需要根據(jù)offsetParent修正坐標(biāo)：
復(fù)制代碼 代碼如下:
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
ps：在Maxthon測試時(shí)發(fā)現(xiàn)body子元素的offsetParent不是body而是html。
為了在移除程序后，能恢復(fù)顯示框的樣式，在load程序中做了樣式的備份：
復(fù)制代碼 代碼如下:
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
并在dispose中恢復(fù)：
$$D.setStyle( this._viewer, this._stylesFollow );
現(xiàn)在已經(jīng)達(dá)到了基本的效果，但由于大圖移動(dòng)范圍的限制，當(dāng)鼠標(biāo)移動(dòng)到接近邊界時(shí)，大圖就卡住不會(huì)動(dòng)了。
為了實(shí)現(xiàn)在鼠標(biāo)移動(dòng)時(shí)，大圖會(huì)持續(xù)變化的效果，在repair中修正了移動(dòng)坐標(biāo)：
復(fù)制代碼 代碼如下:
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
原理稍有些復(fù)雜，以水平坐標(biāo)為例，先看下圖：
大方框代表大圖對(duì)象，小方框代表顯示框。
當(dāng)前位置是根據(jù)鼠標(biāo)坐標(biāo)得到的實(shí)際顯示的位置，目標(biāo)位置想要實(shí)現(xiàn)效果的位置。
有一些物理或幾何知識(shí)應(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)相對(duì)就方便準(zhǔn)確得多，程序也是用后面一個(gè)方法。
首先在init定義一個(gè)_handle拖柄對(duì)象：
復(fù)制代碼 代碼如下:
var handle = $$( this.options.handle );
if ( !handle ) {
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
如果沒有自定義拖柄對(duì)象，會(huì)復(fù)制顯示框作為拖柄對(duì)象。
對(duì)于自動(dòng)生成的拖柄對(duì)象，會(huì)添加"_createbyhandle"屬性作標(biāo)記，方便在dispose中移除。
在load時(shí)，設(shè)置拖柄樣式：
復(fù)制代碼 代碼如下:
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
絕對(duì)定位是必須的，并根據(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定位的修正：
復(fù)制代碼 代碼如下:
if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
然后重新隱藏：
$$D.setStyle( handle, { display: "none", visibility: "visible" });
在start時(shí)，顯示拖柄對(duì)象。
在move時(shí)，根據(jù)大圖定位坐標(biāo)設(shè)置拖柄定位：
復(fù)制代碼 代碼如下:
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
在end時(shí)，隱藏拖柄對(duì)象。
【切割模式】
“切割”就是選擇的部分全透明，其他部分半透明的效果。
主要通過clip來實(shí)現(xiàn)，具體原理可以看圖片切割效果。
為了實(shí)現(xiàn)切割效果，需要在init中新建一個(gè)_cropper切割層：
復(fù)制代碼 代碼如下:
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
并在load中設(shè)置這個(gè)切割層：
復(fù)制代碼 代碼如下:
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
差不多是復(fù)制一個(gè)原圖對(duì)象，并且絕對(duì)定位到原圖對(duì)象上面。
在start時(shí)，顯示切割層，并根據(jù)透明度設(shè)置原圖為半透明狀態(tài)。
在move時(shí)，根據(jù)大圖移動(dòng)的坐標(biāo)設(shè)置切割層要clip的范圍：
復(fù)制代碼 代碼如下:
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
在end時(shí)，隱藏切割層，并重新設(shè)置原圖為不透明，來恢復(fù)原來的狀態(tài)。
還要記得在dispose中移除切割層。
使用技巧
需要擴(kuò)展的效果時(shí)才需要添加這個(gè)擴(kuò)展程序。
可自行對(duì)ImageZoom._MODE進(jìn)行擴(kuò)展，擴(kuò)展后記得在modes添加對(duì)應(yīng)模式。
可以組合多個(gè)基礎(chǔ)模式同時(shí)使用，具體參考"handle-cropper"模式。
使用說明
使用方法跟ImageZoom差不多，只是多了一個(gè)可選參考mode設(shè)置顯示模式。
使用"handle"模式時(shí)，可選參數(shù)的"handle"屬性可以設(shè)置拖柄對(duì)象。
使用"cropper"模式時(shí)，可選參數(shù)的"opacity"屬性可以設(shè)置透明度。
使用"handle-cropper"模式時(shí)，以上兩個(gè)參數(shù)都可以使用。
程序源碼
復(fù)制代碼 代碼如下:
ImageZoom._MODE = {
//跟隨
"follow": {
methods: {
init: function() {
this._stylesFollow = null;//備份樣式
this._repairFollowLeft = 0;//修正坐標(biāo)left
this._repairFollowTop = 0;//修正坐標(biāo)top
},
load: function() {
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
viewer.style.position = "absolute";
//獲取修正參數(shù)
if ( !viewer.offsetWidth ) {//隱藏
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
//修正中心位置
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
//修正offsetParent位置
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
if ( styles ) { $$D.setStyle( viewer, styles ); }
},
repair: function(e, pos) {
var zoom = this._zoom,
viewerWidth = this._viewerWidth,
viewerHeight = this._viewerHeight;
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
},
move: function(e) {
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
},
dispose: function() {
$$D.setStyle( this._viewer, this._stylesFollow );
}
}
},
//拖柄
"handle": {
options: {//默認(rèn)值
handle: ""http://拖柄對(duì)象
},
methods: {
init: function() {
var handle = $$( this.options.handle );
if ( !handle ) {//沒有定義的話用復(fù)制顯示框代替
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;//生成標(biāo)識(shí)用于移除
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
this._handle = handle;
this._repairHandleLeft = 0;//修正坐標(biāo)left
this._repairHandleTop = 0;//修正坐標(biāo)top
},
load: function() {
var handle = this._handle, rect = this._rect;
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
//獲取修正參數(shù)
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
//修正offsetParent位置
if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
//隱藏
$$D.setStyle( handle, { display: "none", visibility: "visible" });
},
start: function() {
this._handle.style.display = "block";
},
move: function(e, x, y) {
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
},
end: function() {
this._handle.style.display = "none";
},
dispose: function() {
if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); }
this._handle = null;
}
}
},
//切割
"cropper": {
options: {//默認(rèn)值
opacity: .5//透明度
},
methods: {
init: function() {
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
this._cropper = cropper;
this.opacity = this.options.opacity;
},
load: function() {
var cropper = this._cropper, image = this._image, rect = this._rect;
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
},
start: function() {
this._cropper.style.display = "block";
$$D.setStyle( this._image, "opacity", this.opacity );
},
move: function(e, x, y) {
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
},
end: function() {
$$D.setStyle( this._image, "opacity", 1 );
this._cropper.style.display = "none";
},
dispose: function() {
document.body.removeChild( this._cropper );
this._cropper = null;
}
}
}
}
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
return function(){
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
//擴(kuò)展options
$$.extend( options, mode.options, false );
//擴(kuò)展鉤子
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
init.apply( this, arguments );
}
})();
在線演示地址http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm
打包下載地址http://www.dhdzp.com/jiaoben/25809.html
出處：http://www.cnblogs.com/cloudgamer/
相關(guān)文章
這篇文章主要介紹了根據(jù)配置文件加載js依賴模塊,解決方法是筆者自己的思路，拋磚引玉，需要的朋友可以參考下2014-12-12
無論是代碼高亮還是語法高亮對(duì)整個(gè)程序來說都非常重要，可以給人眼前一亮的感覺，增加用戶體驗(yàn)度，下面通過本文給大家介紹2016年最熱門的Javascript代碼高亮顯示腳本及代碼語法高亮工具，對(duì)js代碼高亮，代碼語法高亮相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
利用JavaScript為句子加標(biāo)題的3種方法示例
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript為句子加標(biāo)題的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
用js實(shí)現(xiàn)終止瀏覽器對(duì)頁面HTML的繼續(xù)解析即停止解析 兼容firefox
用js實(shí)現(xiàn)終止瀏覽器對(duì)頁面HTML的繼續(xù)解析即停止解析 兼容firefox...2007-11-11
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
由于前端開發(fā)的火熱和一些IT巨頭公司 對(duì) web前端開發(fā)人員的需求旺盛，讓越來越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開發(fā)書單，希望大家喜歡2017-10-10
JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法,詳細(xì)分析了彈出遮罩層效果的實(shí)現(xiàn)方法以及完整的實(shí)例代碼,需要的朋友可以參考下2014-12-12
原生JS和jQuery操作DOM對(duì)比總結(jié)
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對(duì)比總結(jié)，文中總結(jié)了很多的對(duì)比，相信對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01![有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系](http://img.jbzj.com/images/xgimg/bcimg8.png)
有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系
這篇文章主要介紹了有關(guān)JS中的0,null,undefined,[],{},'',false之間的關(guān)系,需要的朋友可以參考下2017-02-02
javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09