vegas 插件主要是基于 jQuery ，它是一种响应式的背景图幻灯片轮播插件。当屏幕宽度减小时，轮播图片高度不变，宽度自适应，上图。

当缩小浏览器的宽度时：

其宽度缩小，高度不变。

veags 的下载地址：http://vegas.jaysalvat.com/documentation/transitions/

上述代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vegas-demo</title>
//引入vegas.css
    <link rel="stylesheet" href="../../Vegas-Background-SlideShow-plugin(background%20carousel)/vegas.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #demo{
            width: 100%;
            height: 480px;
        }
    </style>
</head>
<body>
<div id="demo"></div>
//基于jQuery，需要引入jQuery，之后引入vegas.js，注意顺序
<script src="../../jq/jquery-3.2.1.min.js"></script>
<script src="../../Vegas-Background-SlideShow-plugin(background%20carousel)/vegas.js"></script>
<script>
    $(function(){
//调用vegas方法，其中slides是要显示的背景图片，src指示地址。
        $("#demo").vegas({
            slides:[
                { src : \'./image/slide01.jpg\' },
                { src : \'./image/slide02.jpg\' },
                { src : \'./image/slide03.jpg\' },
                { src : \'./image/slide04.jpg\' }
            ],
//vagas有两种过渡方式，一种是transition，另一种是animation，另种方式各有很多的过渡效果。slideLeft2是transition中的一种
            transition : \'slideLeft2\'
        });
    })
</script>
</body>
</html>

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\' ]

即可。

下载后可以尝试尝试，比较简单，但是在响应式网页设计时很实用！

vegas 的源码大家可以看一看。

版权声明：本文为bowen-wu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/bowen-wu/p/8056123.html