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

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

Usage

new S.ImageZoom(trigger, config)

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


KISSY.ready(function(S) {
    var a = new S.ImageZoom("#standard");
    a.set('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'.

alignTo - String

大图显示位置相对于哪个元素.

默认不设置, 相对于小图位置, 如果取 PARENT, 为小图的 offsetParent 元素.

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' 时, 宽/高 取小图的高/宽.

hasZoom - Boolean

初始时是否显示放大效果. 默认为 true, 显示放大. 在多图切换时, 可重设该值来开启或关闭显示放大功能. 如果多个图都不需要放大显示, ImageZoom 不会生成任何东西.

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 - String: 大图路径, 为 '' 时, 取触点上的 data-ks-imagezoom 属性值. 默认为 ''.
如果有多张图片切换时, 需要修改 大图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);
    });
});

- hasZoom - Boolean: 初始时是否显示放大效果. 默认为 true, 显示放大. 在多图切换时, 可重设该值来开启或关闭显示放大功能. 如果多个图都不需要放大显示, ImageZoom 不会生成任何东西.

changeImageSrc( src )

设置小图 src.

refreshRegion()

调整放大区域位置.

Events

show

放大区域显示之后.

hide

放大区域隐藏之后.