[h5年度报告]1.2使⽤swiper和swiperanime实现简单h5滑动动
画页⾯
下载准备：
swiper3.0.6：swiper.min.js和swiper.min.css
swiper animate：animate.min.js和animate.min.css
下载好上述两组⽂件后解压，在index.html所在⽬录分别创建css和js⽂件夹，将下载的四个⽂件放⼊对应⽂件夹中。
⼀、引⼊与配置
在head中加⼊以下代码引⼊下载的⽂件
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
因为我们⾯向的主要是移动端需要保持100%占满屏幕所以再在head加⼊⼀段样式（style）
<style>
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.
swiper-container {
width: 100%;
height: 100%;
animate下载安装
}
.swiper-slide{
width:100%;
height:100%;
}
</style>
最后⾯两个就是我们后⾯要⽤到的class名称了马上就可以见到了！
然后我们在body的最后加⼊⼀段js代码来运⾏所需要的功能
<script>
const swiper = new Swiper('.swiper-container', {
// ⽅向：竖向
direction: 'vertical',
//⿏标控制：允许
mousewheelControl:true,
//初始化完成后触发动画
onInit:function(swiper){
swiperAnimate(swiper);
},
//过度结束时触发动画
onTransitionEnd:function(swiper){
swiperAnimate(swiper);
},
});
</script>
这下我们就是配置完毕了！
⼆、实现滑动和动画
1、滑动
如何实现⼀页⼀页的滑动效果呢，在body中加⼊以下代码！
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p>《⽣成你的专属报告》</p>
</section>
</div>
</div>
按照格式最外层由两层div包裹，class分别为swiper-container和swiper-wrapper
是不是有点眼熟呢就是我们前⾯样式设置100%的那两个！
然后再加⼊⼀层section标签，class为swiper-slide，slide有滑⾏的意思，⾥⾯包含的内容代表了⼀次滑动所显⽰的界⾯。那我们怎么加⼊⼏页呢？ 只需要把section标签复制就好了，如下代码
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p>《⽣成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p>《⽣成我的专属报告》</p>
</section>
<section class="swiper-slide">
<p>《⽣成他的专属报告》</p>
</section>
</div>
</div>
这个时候我们保存好⽂件在浏览器访问就可以出现滑动的效果了！
但是这样翻页实在没有⼀点h5的感觉，这个时候就要给他们每个部分加⼊动画了！
2、动画
动画的实现接住了animate就⼗分的⽅便了
只需要在对应的标签内加⼊固定的class名ani 和设置⼀些参数就好了 如下⾯代码
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《⽣成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《⽣成我的专属报告》</p>      </section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《⽣成他的专属报告》</p>      </section>
</div>
</div>
其中三个参数分别为
swiper-animate-effect切换效果，例如 fadeInUp
swiper-animate-duration动画持续时间（单位秒），例如 0.5s  （可选）
swiper-animate-delay动画延迟时间（单位秒），例如 0.3s  （可选）
切换效果可以在最下⾯查看
⾄此我们就完成了最基础的学习~
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>毕业⽣读书报告</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<style>
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.
swiper-slide{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《⽣成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《⽣成我的专属报告》</p>      </section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《⽣成他的专属报告》</p>      </section>
</div>
</div>
<script>
const swiper = new Swiper('.swiper-container', {
// ⽅向：竖向
direction: 'vertical',
//⿏标控制：允许
mousewheelControl:true,
//初始化完成后触发动画
onInit:function(swiper){
swiperAnimate(swiper);
},
//过度结束时触发动画
onTransitionEnd:function(swiper){
swiperAnimate(swiper);
},
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。