The source code

    /**
     * @ignore
     *  ImageZoom.
     * @author yiminghe@gmail.com, qiaohua@taobao.com
     */
    KISSY.add('imagezoom', function (S, Node, Overlay, Zoomer, undefined) {
        var $ = Node.all,
            doc = $(S.Env.host.document),
            IMAGEZOOM_ICON_TMPL = "<span class='{iconClass}'></span>",
            undefinedNode = /**
             @ignore
             @type Node
             */undefined,
            IMAGEZOOM_WRAP_TMPL = "<span class='{wrapClass}'></span>",
            STANDARD = 'standard',
            groupEventForInnerAnim = '.ks-imagezoom-img-mouse',
            INNER = 'inner',
            ABSOLUTE_STYLE = ' style="position:absolute;top:-9999px;left:-9999px;" ',
            BIG_IMG_TPL = '<img src=' + '{src} {style} />';

        function constrain(v, l, r) {
            return Math.min(Math.max(v, l), r);
        }

        /**
         * image zoomer for kissy
         * @class KISSY.ImageZoom
         * @extends KISSY.Overlay
         */
        var ImageZoom = Overlay.extend({

                initializer: function () {
                    var self = this;

                    if (!self.get("bigImageWidth") || !self.get("bigImageHeight")) {
                        S.error("bigImageWidth/bigImageHeight in ImageZoom must be set!");
                    }

                    imageZoomRenderUI(self);
                    imageZoomBindUI(self);
                },

                renderUI: function () {
                    var self = this,
                        image = self.get('imageNode'),
                        contentEl = self.get("contentEl");

                    self.bigImage = $(S.substitute(BIG_IMG_TPL, {
                        src: self.get("bigImageSrc"),
                        style: ABSOLUTE_STYLE
                    })).appendTo(contentEl, undefined);

                    self.bigImageCopy = $(S.substitute(BIG_IMG_TPL, {
                        src: image.attr('src'),
                        style: ABSOLUTE_STYLE
                    })).prependTo(contentEl, undefined);

                    if (self.get('type') != INNER) {
                        self.lens = $('<span ' +
                            ABSOLUTE_STYLE +
                            ' class="' + self.get('prefixCls') + 'imagezoom-lens' + '"></span>')
                            .appendTo(self.imageWrap, undefined);
                    }
                },

                bindUI: function () {
                    var self = this;
                    self.on('hide', onZoomerHide, self);
                },

                destructor: function () {
                    var self = this,
                        img = self.get('imageNode'),
                        imageWrap;

                    onZoomerHide.call(self);

                    if (imageWrap = self.imageWrap) {
                        img.insertBefore(imageWrap, undefinedNode);
                        imageWrap.remove();
                    }

                    img.detach('mouseenter', self.__onImgEnter);
                },

                '_onSetBigImageWidth': function (v) {
                    var self = this;
                    self.bigImage.width(v);
                    self.bigImageCopy.width(v);
                },

                '_onSetBigImageHeight': function (v) {
                    var self = this;
                    self.bigImage.height(v);
                    self.bigImageCopy.height(v);
                },

                '_onSetBigImageSrc': function (v) {
                    this.bigImage.attr('src', v);
                },

                '_onSetCurrentMouse': function (currentMouse) {
                    var self = this,
                        lensLeft,
                        lensTop,
                        pageX = currentMouse.pageX,
                        pageY = currentMouse.pageY,
                        lens = self.lens,
                        bigImageOffset;

                    // inner 动画中
                    if (self.bigImage.isRunning()) {
                        return;
                    }

                    // 更新 lens 位置
                    if (lens) {
                        lensLeft = pageX - self.lensWidth / 2;
                        lensTop = pageY - self.lensHeight / 2;
                        lens.offset({
                            left: self.lensLeft = constrain(lensLeft, self.minLensLeft, self.maxLensLeft),
                            top: self.lensTop = constrain(lensTop, self.minLensTop, self.maxLensTop)
                        });
                    }

                    // note: 鼠标点对应放大点在中心位置
                    bigImageOffset = getBigImageOffsetFromMouse(self, currentMouse);

                    self.bigImageCopy.css(bigImageOffset);
                    self.bigImage.css(bigImageOffset);
                }
            },
            {
                ATTRS: {
                    /**
                     * existing image node needed to be zoomed.
                     * @cfg {HTMLElement|String} imageNode
                     */
                    /**
                     * @ignore
                     */
                    imageNode: {
                        setter: function (el) {
                            return Node.one(el);
                        }
                    },

                    /**
                     * existing image node's src.
                     * @type {String}
                     * @property imageSrc
                     */
                    /**
                     * @ignore
                     */
                    imageSrc: {
                        valueFn: function () {
                            return this.get('imageNode').attr('src');
                        }
                    },

                    /**
                     * zoomed overlay width
                     * Defaults to imageNode's width.
                     * @cfg {Number} width
                     */
                    /**
                     * @ignore
                     */
                    width: {
                        valueFn: function () {
                            return this.get("imageNode").width();
                        }
                    },
                    /**
                     * zoomed overlay height
                     * Defaults to imageNode's height.
                     * @cfg {Number} height
                     */
                    /**
                     * @ignore
                     */
                    height: {
                        valueFn: function () {
                            return this.get("imageNode").height();
                        }
                    },
                    /**
                     * whether to allow imageNode zoom
                     * @cfg {Boolean} hasZoom
                     */
                    /**
                     * whether to allow imageNode zoom
                     * @type {Boolean}
                     * @property hasZoom
                     */
                    /**
                     * @ignore
                     */
                    hasZoom: {
                        value: true,
                        setter: function (v) {
                            return !!v;
                        }
                    },

                    /**
                     * type of zooming effect
                     * @cfg {KISSY.ImageZoom.ZoomType} type
                     */
                    /**
                     * @ignore
                     */
                    type: {
                        value: STANDARD   // STANDARD  or INNER
                    },

                    /**
                     * big image src.
                     * Default to: value of imageNode's **data-ks-imagezoom** attribute value
                     * @cfg {string} bigImageSrc
                     */
                    /**
                     * big image src.
                     * @type {string}
                     * @property bigImageSrc
                     */
                    /**
                     * @ignore
                     */
                    bigImageSrc: {
                        valueFn: function () {
                            return  this.get('imageNode').attr('data-ks-imagezoom');
                        }
                    },

                    /**
                     * width of big image
                     * @cfg {Number} bigImageWidth
                     */
                    /**
                     * width of big image
                     * @type {Number}
                     * @property bigImageWidth
                     */
                    /**
                     * @ignore
                     */
                    bigImageWidth: {},

                    /**
                     * height of big image
                     * @cfg {Number} bigImageHeight
                     */
                    /**
                     * height of big image
                     * @type {Number}
                     * @property bigImageHeight
                     */
                    /**
                     * @ignore
                     */
                    bigImageHeight: {},

                    /**
                     * current mouse position
                     * @private
                     * @property currentMouse
                     */
                    /**
                     * @ignore
                     */
                    currentMouse: {}
                }
            }, {
                xclass: 'imagezoom-viewer'
            });

        // # -------------------------- private start

        function setZoomerPreShowSession(self) {
            var img = self.get('imageNode'),
                imageOffset = img.offset(),
                imageLeft,
                imageWidth,
                imageHeight,
                zoomMultipleH,
                zoomMultipleW,
                lensWidth,
                lensHeight,
                bigImageWidth = self.get('bigImageWidth'),
                bigImageHeight = self.get('bigImageHeight'),
                width = self.get('width'),
                height = self.get('height'),
                align,
                originNode,
                imageTop;

            imageLeft = self.imageLeft = imageOffset.left;
            imageTop = self.imageTop = imageOffset.top;
            imageWidth = self.imageWidth = img.width();
            imageHeight = self.imageHeight = img.height();
            zoomMultipleH = self.zoomMultipleH = bigImageHeight / imageHeight;
            zoomMultipleW = self.zoomMultipleW = bigImageWidth / imageWidth;
            // 考虑放大可视区域，大图，与实际小图
            // 镜片大小和小图的关系相当于放大可视区域与大图的关系
            // 计算镜片宽高, vH / bigImageH = lensH / imageH
            lensWidth = self.lensWidth = width / zoomMultipleW;
            lensHeight = self.lensHeight = height / zoomMultipleH;
            self.minLensLeft = imageLeft;
            self.minLensTop = imageTop;
            self.maxLensTop = imageTop + imageHeight - lensHeight;
            self.maxLensLeft = imageLeft + imageWidth - lensWidth;
            self.maxBigImageLeft = 0;
            self.maxBigImageTop = 0;
            self.minBigImageLeft = -(bigImageWidth - width);
            self.minBigImageTop = -(bigImageHeight - height);

            if (self.get('type') === INNER) {
                // inner 位置强制修改
                self.set('align', {
                    node: img,
                    points: ['cc', 'cc']
                });
            } else {
                align = self.get("align") || {};
                originNode = align.node;
                delete align.node;
                align = S.clone(align);
                align.node = originNode || img;
                self.set("align", align);
            }
            self.icon.hide();
            doc.on('mousemove mouseleave', onMouseMove, self);
        }

        function onZoomerHide() {
            var self = this,
                lens = self.lens;
            doc.detach('mousemove mouseleave', onMouseMove, self);
            self.icon.show();
            if (lens) {
                lens.hide();
            }
        }

        function imageZoomRenderUI(self) {
            var imageWrap,
                icon,
                image = self.get('imageNode');

            imageWrap = self.imageWrap = $(S.substitute(IMAGEZOOM_WRAP_TMPL, {
                wrapClass: self.get('prefixCls') + 'imagezoom-wrap'
            })).insertBefore(image, undefinedNode);

            imageWrap.prepend(image);
            icon = self.icon = $(S.substitute(IMAGEZOOM_ICON_TMPL, {
                iconClass: self.get('prefixCls') + 'imagezoom-icon'
            }));
            imageWrap.append(icon);
        }

        function imageZoomBindUI(self) {
            var img = self.get('imageNode'),
                currentMouse,
                type = self.get('type'),
                commonFn = (function () {
                    var buffer;

                    function t() {
                        if (buffer) {
                            return;
                        }
                        buffer = S.later(function () {
                            buffer = 0;
                            detachImg(img);
                            setZoomerPreShowSession(self);
                            self.show();
                            // after create lens
                            self.lens.show()
                                .css({
                                    width: self.lensWidth,
                                    height: self.lensHeight
                                });
                            self.set('currentMouse', currentMouse);
                        }, 50);
                    }

                    t.stop = function () {
                        buffer.cancel();
                        buffer = 0;
                    };

                    return t;
                })(),
            // prevent flash of content for inner anim
                innerFn = S.buffer(function () {
                    detachImg(img);
                    setZoomerPreShowSession(self);
                    self.show();
                    animForInner(self, 0.4, currentMouse);
                }, 50),
                fn = type == 'inner' ? innerFn : commonFn;

            img.on('mouseenter', self.__onImgEnter = function (ev) {
                if (self.get('hasZoom')) {
                    currentMouse = ev;
                    img.on('mousemove' + groupEventForInnerAnim,function (ev) {
                        currentMouse = ev;
                        fn();
                    }).on('mouseleave' + groupEventForInnerAnim, function () {
                            fn.stop();
                            detachImg(img);
                        });
                    fn();
                }
            });

            self.on('afterImageSrcChange', onImageZoomSetImageSrc, self);
            self.on('afterHasZoomChange', onImageZoomSetHasZoom, self);

            onImageZoomSetHasZoom.call(self, {newVal: self.get('hasZoom')});
        }

        function detachImg(img) {
            img.detach('mouseleave' + groupEventForInnerAnim);
            img.detach('mousemove' + groupEventForInnerAnim);
        }

        function onMouseMove(ev) {
            var self = this,
                rl = self.imageLeft,
                rt = self.imageTop,
                rw = self.imageWidth,
                pageX = ev.pageX,
                pageY = ev.pageY,
                rh = self.imageHeight;
            if (String(ev.type) == 'mouseleave') {
                self.hide();
                return;
            }
            if (pageX > rl && pageX < rl + rw &&
                pageY > rt && pageY < rt + rh) {
                self.set('currentMouse', {
                    pageX: pageX,
                    pageY: pageY
                });
            } else {
                self.hide();
            }
        }

        // Inner 效果中的放大动画
        function animForInner(self, seconds, currentMouse) {
            var bigImages = self.bigImage;

            bigImages.add(self.bigImageCopy);

            bigImages.stop();

            // set min width and height
            bigImages.css({
                width: self.imageWidth,
                height: self.imageHeight,
                left: 0,
                top: 0
            });

            bigImages.animate(S.mix({
                width: self.get('bigImageWidth'),
                height: self.get('bigImageHeight')
            }, getBigImageOffsetFromMouse(self, currentMouse)), seconds);
        }

        function onImageZoomSetHasZoom(e) {
            this.icon[e.newVal ? 'show' : 'hide']();
        }

        function onImageZoomSetImageSrc(e) {
            var src = e.newVal,
                self = this,
                bigImageCopy;
            self.get('imageNode').attr('src', src);
            if (bigImageCopy = self.bigImageCopy) {
                bigImageCopy.attr('src', src);
            }
        }

        function getBigImageOffsetFromMouse(self, currentMouse) {
            var width = self.get('width'),
                height = self.get('height');
            return {
                left: constrain(-(currentMouse.pageX - self.imageLeft)
                    * self.zoomMultipleW + width / 2, self.minBigImageLeft, self.maxBigImageLeft),
                top: constrain(-(currentMouse.pageY - self.imageTop)
                    * self.zoomMultipleH + height / 2, self.minBigImageTop, self.maxBigImageTop)
            };
        }

        // # -------------------------- private end

        /**
         * zoom mode for imagezoom
         * @enum {String} KISSY.ImageZoom.ZoomType
         */
        ImageZoom.ZoomType = {
            /**
             * zoom overlay is beside imageNode
             */
            STANDARD: 'standard',
            /**
             * zoom overlay covers imageNode
             */
            INNER: 'inner'
        };

        return ImageZoom;

    }, {
        requires: ['node', 'overlay']
    });

    /**
     * @ignore
     * NOTES:
     * 2012-12-17 yiminghe@gmail.com
     *  - refactor and document
     *  - TODO extend overlay ?? confused
     *
     * 20120504 by yiminghe@gmail.com
     *  - refactor
     *  - fix bug: show 前 hasZoom 设了无效
     *
     * 201101 by qiaohua@taobao.com
     *  - 重构代码, 基于 UIBase
     */