CSS图书馆 » HTML & CSS » 带幻灯片效果的全屏背景jQuery插件：Vegas2

带幻灯片效果的全屏背景jQuery插件：Vegas2

发表于: HTML & CSS. 评论
Sponsor

今天为大家分享一个网页全屏背景jQuery插件 Vegas2，它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示。

全屏背景插件 Vegas

幻灯片动画参数

在插件的文档页可以查看自带的切换动画效果及即时预览（点击查看）

全屏背景 jquery插件

使用方法：

STEP 1: 嵌入CSS样式表和JS

把VEGAS的CSS、JS以及jQuery插件嵌入到<head>内。

<head>
<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>
</head>

STEP 2: JAVASCRIPT设置，添加背景图片

<body>
...
 HTML内容
...
<script>
$('#example, body').vegas({
 slides: [
 { src: '/img/slide1.jpg' },
 { src: '/img/slide2.jpg' },
 { src: '/img/slide3.jpg' },
 { src: '/img/slide4.jpg' }
 ]
});
</script>
</body>

另外建议看SETTING页面，查看更多插件的参数设置（点击查看）

全屏网页背景

插件就介绍到这里，如果在做全屏式的网页，可以使用这个背景插件，或许能给网页增加不少的气氛哦！

插件名称：Vegas
下载地址：http://vegas.jaysalvat.com/index.html
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }