ImageZoom 图片放大效果（扩展篇）

上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。
主要扩展了原图和显示框的展示模式，有以下几种模式：
"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[