主要扩展了原图和显示框的展示模式，有以下几种模式：
"follow" 跟随模式：显示框能跟随鼠标移动的效果；
"handle" 拖柄模式：原图上有一个拖柄来标记显示范围；
"cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示；
"handle-cropper" 拖柄切割模式：拖柄模式和切割模式的混合版，同时用透明度和拖柄来标记显示范围。
当然更多的扩展等待你的想象力来发掘。
兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1
程序说明
【扩展模式】
上次ImagesLazyLoad使用了继承做扩展，这次用插件的形式来做扩展。
先看看基础模式，这些模式是保存在ImageZoom._MODE中的，类似这样的结构：
复制代码 代码如下:
ImageZoom._MODE = {
模式名: {
options: {
...
},
methods: {
init: function() {
...
},
...
}
},
...
}
其中模式名就是基础模式的名字，options是可选参数扩展，methods是程序结构的扩展。
基础模式包含"follow", "handle"和"cropper"模式，后面再详细介绍。
methods包含要扩展的钩子程序，是扩展的主要部分。
ps：这里说的模式不是“设计模式”里面的模式。
扩展需要在程序初始化时进行，要放在_initialize程序之前执行。
为了不影响原程序的结构，这里用织入法在_initialize之前插入一段程序：
复制代码 代码如下:
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
...;
return function(){
...
init.apply( this, arguments );
}
})();
原理就是先保存原来的函数，插入一段程序组成新函数，然后重新替换原来的函数。
考虑到组合基础模式的情况，使用了一个对象保存真正使用的模式：
复制代码 代码如下:
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
可以看到"handle-cropper"模式其实就是"handle"和"cropper"的组合模式。
插入的程序的主要任务是根据设定好的基础模式，进行扩展：
复制代码 代码如下:
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 );
}
首先扩展options可选参数对象，由于可选参数是第三个参数，所以用arguments[2]获取。
extend的第三个参数设为false，说明不重写相同属性，即保留自定义的属性值。
然后把methods里面的方法作为钩子函数逐个添加到程序中。
methods可以包含init, load, start, repair, move, end, dispose这几个方法，分别对应ImageZoom中初始化、加载、开始、修正、移动、结束和销毁事件。
在扩展时，不同的事件执行不同的任务：
init初始化函数：用来设置扩展需要的属性，注意这些属性不要跟ImageZoom本身的属性冲突了，即重名。
load加载函数：图片加载完成，相关参数也设置完成，主要做执行放大效果前的准备工作。
start开始函数：触发放大效果时执行的。
repair修正函数：用于修正大图定位的坐标值。
move移动函数：触发放大效果后，鼠标移动时执行的。
end结束函数就：结束放大效果时执行的。
dispose销毁函数：在移除程序时清理程序的。
ps：具体位置参考ImageZoom中使用$$CE.fireEvent的部分。
可以看到这里用了织入法（weave）和钩子法（hook）对程序做扩展。
织入法是一种aop，可以在不改变原程序的基础上进行扩展，但只能在函数前面或后面加入程序。
而钩子法必须在原程序中设置好对应钩子才能配合使用，但位置相对灵活。
【跟随模式】
在"follow"跟随模式中，进行放大时，显示框会跟随鼠标移动，就像拿着放大镜看的效果。
首先显示框要绝对定位，要实现显示框跟随鼠标移动，只要在move中设置对应的left/top就行了：
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
其中pageX/pageY是鼠标当前的坐标，_repairFollowLeft/_repairFollowTop是坐标的修正参数。
修正参数是在load中设置的，如果显示框隐藏的话，用上一篇获取显示范围的方法获取参数：
复制代码 代码如下: