3.3.3 animateImgShow

说明: 用来查看大图, 添加了一些动画, 并提供了多重配置项

使用及参数说明:

xui.showAnimatedImg({
    img: src,
    divide: number,
    number: number,
    delay: string,
    animatedStyle: string,
});

• 给图片一个点击事件(或者别的),然后调用方法即可查看大图
• img表示图片的src 必传
• divide表示图片分为几块展示, 默认4, 可以设置为9，后期废弃
• number表示图片分为几块展示, 默认4，可以选择其他数字
• delay表示图片分割之后的动画延时
• animatedStyle表示图片打开之后的动画效果, 可选translate, rotate, skew, scale
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

点击图片即可放大,并支持旋转缩放等等

1.看一看最简单的配置, 传入图片即可

xui.showAnimatedImg({
    img: e.target,
});

2.我们还可以给图片设置更多属性, 选择动画, 然后点击图片

选择动画animatedStyle:

选择分割数量number:

选择延时delay:

xui.showAnimatedImg({
    img: e.target,
    number: 9,
    delay: .2,
    animatedStyle: 'scale',
});