<script type="text/javascript" src="../assets/xui.js"></script>
说明: 用来查看大图, 添加了一些动画, 并提供了多重配置项
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.看一看最简单的配置, 传入图片即可
<script type="text/javascript">
document.getElementById('showImg').onclick = function(e){
xui.showAnimatedImg({
img: e.target,
});
};
</script>
xui.showAnimatedImg({
img: e.target,
});2.我们还可以给图片设置更多属性, 选择动画, 然后点击图片
选择动画animatedStyle:
translate
rotate
skew
scale
选择分割数量number:
1
2
3
4
5
6
7
8
9
10
选择延时delay:
0.05s
0.1s
0.2s
0.3s
0.4s
0.5s
<script type="text/javascript">
let imgExample = document.getElementById('showImg1')
xui.dropDown({
id: 'style',
getValue(){
let str = `http://img.infinitynewtab.com/wallpaper/${xui.randomNum(1, 2000)}.jpg`;
imgExample.src = str;
}
});
xui.dropDown({
id: 'count',
getValue(){
let str = `http://img.infinitynewtab.com/wallpaper/${xui.randomNum(1, 2000)}.jpg`;
imgExample.src = str;
}
});
xui.dropDown({
id: 'delay',
getValue(){
let str = `http://img.infinitynewtab.com/wallpaper/${xui.randomNum(1, 2000)}.jpg`;
imgExample.src = str;
}
});
imgExample.onclick = function(e){
var style = document.getElementById('style').value;
var count = document.getElementById('count').value;
var delay = document.getElementById('delay').value;
xui.showAnimatedImg({
img: e.target,
number: count,
delay: delay,
animatedStyle: style,
});
};
</script>
xui.showAnimatedImg({
img: e.target,
number: 9,
delay: .2,
animatedStyle: 'scale',
});