1. 引入
<link rel="stylesheet" href="/static/css/vegas.css"> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/vegas.js"></script>2. 写script
<script> $(function(){ //调用vegas方法，其中slides是要显示的背景图片，src指示地址。 $("body").vegas({ slides:[ { src : '/static/images/bd1.jpg' }, { src : '/static/images/bd2.jpg' }, { src : '/static/images/bd3.jpg' }, { src : '/static/images/bd4.jpg' } ], //vagas有两种过渡方式，一种是transition，另一种是animation，另种方式各有很多的过渡效果。slideLeft2是transition中的一种 transition : 'slideLeft2' }); }) </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
