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: translaterotateskewscale

选择分割数量number: 12345678910

选择延时delay: 0.05s0.1s0.2s0.3s0.4s0.5s

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