Navigation

ImageZoom

图片放大镜效果

Class

Events

Class Detail

class imagezoom.ImageZoom
ImageZoom (trigger,config)
Parameters:
  • String|KISSY.Node|HTMLElement – 小图元素或选择器 .
  • config (Object) – 配置项, 详细见下方 Config Attributes Detail .
ImageZoom (config)
Parameters:config (Object) – 配置项, 详细见下方 Config Attributes Detail . 原本的 trigger 在 1.2 中由配置项中的 imageNode 代替

Config Attributes Detail

ImageZoom.config.imageNode

{String|HTMLElement} - 小图元素选择器或小图元素.

ImageZoom.config.type

{String} - 可选, 缩放显示类型, 默认是标准模式 ‘standard’, 或者内嵌模式 ‘inner’.

ImageZoom.config.bigImageSrc

{String} - 可选, 大图路径, 为 ‘’ 时, 取触点上的 data-ks-imagezoom 属性值. 默认为 ‘’.

ImageZoom.config.bigImageWidth

{Number} - 可选, 大图宽度, 默认为 800;

ImageZoom.config.bigImageHeight

{Number} - 可选, 大图高度, 默认为 800;

ImageZoom.config.align

{Object} - 同 align .

ImageZoom.config.preload

{Boolean} - 可选, 是否预加载大图. 默认为 true.

ImageZoom.config.hasZoom

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

ImageZoom.config.width

{Number|String} - 可选, 放大区域宽度. 默认为 ‘auto’, 当取 ‘auto’ 时, 宽度取小图的宽度.

ImageZoom.config.height

{Number|String} - 可选, 放大区域高度. 默认为 ‘auto’, 当取 ‘auto’ 时, 高度取小图的高度.

ImageZoom.config.iconClass

{String} - 可选, 放大镜图标的类, 默认为 ‘ks-imagezoom-icon’

ImageZoom.config.showIcon

{Boolean} - 可选, 是否显示放大镜小 icon, 默认为 true.

ImageZoom.config.lensClass

{String} - 可选, 镜片类, 默认为 ‘ks-imagezoom-lens

ImageZoom.config.wrapClass

{String|HTMLElement} - 显示区域容器的类.

Properties Detail

ImageZoom.prototype.image

{HTMLElement} - 需要缩放的小图元素.

ImageZoom.prototype.viewer

{HTMLElement} - 显示区域的容器元素.

ImageZoom.prototype.lens

{HTMLElement} - 镜片元素.

ImageZoom.prototype.lensIcon

{HTMLElement} - 放大镜图标元素.

ImageZoom.prototype.bigImage

{HTMLElement} - 大图元素.

Methods Detail

ImageZoom.prototype.show()
show ()
显示放大区域.
ImageZoom.prototype.hide()
hide ()
隐藏放大区域.
ImageZoom.prototype.set()
set (name,val)
设置bigImage、hasZoom属性
Parameters:
  • name (String) – 属性名, igImage或hasZoom
  • val (String|Boolean) – 属性值, bigImage属性为String类型, hasZoom为Boolean类型
 
KISSY.use("imagezoom",function(S,ImageZoom) {
    var m = new 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);
    });
});
ImageZoom.prototype.changeImageSrc()
changeImageSrc (src)
设置小图 src.
ImageZoom.prototype.refreshRegion()
refreshRegion ()
调整放大区域位置.

Events Detail

ImageZoom.show()
show ()
放大区域显示之后.
ImageZoom.hide()
hide ()
放大区域隐藏之后.

Navigation