背景图轮播 响应式 插件 vegas的使用和下载

1. 引入

2. 写script

　　

transition 的效果有：

fade   fade2

slideLeft   slideLeft2

burn   burn2

slideRight   slideRight2

slideUp   slideUp2

slideDown   slideDown2

zoomIn   zoomIn2

zoomOut   zoomOut2

swirlLeft   SwirlLeft2

swirlRight   swirlRight2

blur   blur2

flash   flash2

每个转换都有两个版本。通过transitionDuration选项可以设置毫秒数。

animation 的效果有：

kenburns 

kenburnsUp

kenburnsDown

kenburnsRight

kenburnsLeft

kenburnsUpLeft

kenburnsUpRight

kenburnsDownLeft

kenburnsDownRight

random

在官方网站上可以尝试各种效果。

可以使用数组定义转换的列表

transition : [ ' fade ', ' burn ' ]

也可以自定义转换

转换有3个类名，将其插入css中。

.vegas-transition-fade,
.vegas-transition-fade2 {
//此处可以自己随意设置效果
    opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
    opacity: 1;
}

.vegas-transition-fade2-out {
    opacity: 0;
}

并且在转换列表中添加自己的转换

transitionRegister: [ 'myTransition1', 'myTransition2' ]

Animation 通过animationDuration选项可以设置毫秒数，其他的和transition原理都一样。

设置自定义转换时，需要使用帧动画 @keyframes ，并且在转换列表中添加：

animationRegister: [ 'myAnimation1', 'myAnimation2' ]

即可。

 

下载地址：https://github.com/jaysalvat/vegas

转载于:https://www.cnblogs.com/wshr210/p/11383818.html