jquery-backstretch实现登录页面背景图切换
欧阳何平
backstretch官方地址:
官方地址上有插件的详细使用说明，官方地址：https://github.com/srobbin/jquery-backstretch
1、安装
1-1、从GitHub下载/保存JS文件在页面上直接引入
2-1、npm安装
npm i jquery-backstretch
2、使用：
2-1、Backstretch幻灯片演示与延迟加载配合使用：
<body>
<div class="container" style="width: 1000px;height: 500px;"></div>
<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
<script>
$('.container').backstretch([
"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
], {
// Backstretch创建背景图像的幻灯片显示
fade: 750,
duration: 4000,
preload: 1, //Use the lazy-loading functionality
start: 2 ,//Optional - now starts with "dome.jpg"
// 背景图像的幻灯片随机过渡
duration: 4000,
transition: 'push_left|push_right|cover_up|cover_down|fade',
transitionDuration: 250
});
</script>
</body>
2 -2、Backstretch创建背景图像的幻灯片显示
<body>
<div class="container" style="width: 1000px;height: 500px;"></div>
<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
<script>
$('.container').backstretch([
"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
], {
fade: 750,
duration: 4000
});
</script>
</body>
2-3、背景图像的幻灯片随机过渡
<body>
<div class="container" style="width: 1000px;height: 500px;"></div>
<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
<script>
$('.container').backstretch([
"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
], {
duration: 4000,
transition: 'push_left|push_right|cover_up|cover_down|fade',
transitionDuration: 250
});
</script>
</body>
4、在vue中应用
<div class="container"></div>
<script>
import '../../node_modules/jquery-backstretch/jquery.backstretch.min.js'
export default {
name: "home",
data() {
return {
}
},
mounted(){
this.initSwiper()
},
methods:{
initSwiper(){
console.log($('.container').css('height'))
$('.container').backstretch([
"http://b.hi1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
"http://b3.jpg",
"http://f525.jpg"
], {
fade: 750,
duration: 1000,
preload: 1, //Use the lazy-loading functionality
start: 2 //Optional - now starts with "dome.jpg"
});
}
}
};
</script>
<style lang="scss">
.container{
width: 600px;
height: 400px;
}
</style>
类似资料：