图片放大镜效果, 功能说明:

- 显示小图, 当鼠标移到小图的一个特定范围内时, 该区域被放大并显示在小图旁边;
- 见 ImageZoom demo
- 调研报告, 见 slide

### Usage

#### new S.ImageZoom(trigger, config)

S.ImageZoom 构造器, 传入小图元素或小图id及配置项 , 例如

    KISSY.ready(function(S) {
    	new S.ImageZoom("#standard", {
                bigImageSrc: 'big image url'
            });
    });

### Config

#### type - `String`

缩放显示类型, 默认是标准模式 'standard', 目前仅支持此模式.

#### bigImageSrc - `String`

大图路径, 为 '' 时, 取触点上的 data-ks-imagezoom 属性值. 默认为 ''.

#### bigImageSize - `Array`

大图高宽, 如 [800, 800];

是指在没有加载完大图前, 使用这个值来替代计算, 等加载完后会重新更新镜片大小, 具体场景下, 请设置个更合适的值.

#### position - `String`

大图显示在小图的哪个位置.

可取 'top', 'right', 'bottom', 'left', 'inner', 当为 'inner' 时, 会覆盖显示在小图上. 默认为 'right'.

#### offset - `Number | Array`

大图相对于小图位置的偏移量. 单一值或 [x, y]. 默认为 10.

x 值对应于水平方向上的偏移, y值对应于垂直方向上的偏移. 当 offset 为一个 Number 或 [Number] 时, 仅指水平方向上的偏移, 垂直方向上偏移为 0; 如果 position 设置 'top'/'bottom', 则需要通过 offset 为 [0, 10]来设置.

#### preload - `Boolean`

是否预加载大图. 默认为 true.

#### timeout - `Number`

等待大图加载的最大时间, 单位: s. 默认 2 min.

#### timeoutMsg - `String`

大图无法加载超时时, 显示的提示文字. 默认为 "图片暂不可用".

#### zoomSize - `Array`

放大区域宽高. 默认为 ['auto', 'auto'], 当取 'auto' 时, 宽/高 取小图的高/宽.

#### lensIcon - `Boolean`

是否显示放大镜提示图标, 默认为 true.

#### zoomCls - `String`

放大区域额外样式, 默认为 ''. 原有放大区域样式为 'ks-imagezoom-viewer', 设置该值会追加元素 class.

### Members

#### image - `HTMLElement`

需要缩放的小图元素.

#### config - `Object`

配置选项, 具体参见上述 Config.

#### lens - `HTMLElement`

镜片元素.

#### lensIcon - `HTMLElement`

放大镜图标元素.

#### bigImage - `HTMLElement`

大图元素.

### Methods

#### show()

显示放大区域.

#### hide()

隐藏放大区域.

#### set(name, val)

设置配置信息, 目前只可动态设置 bigImageSrc 这个值.

如果有多张图片切换时, 需要修改 大图src, 如:

    KISSY.ready(function(S) {
        var m = new S.ImageZoom("#multi");
        S.Event.on("#imgList img", 'click', function() {
            var data = S.DOM.attr(this, 'data-ks-imagezoom');
            S.DOM.attr('#multi', 'src', data+'_310x310.jpg');
            m.set('bigImageSrc', data);
        });
    });

home › imagezoom :