十四、移动端滑屏1. 整个页面做在一个index.html里面，方便插入音乐等公共文件 2. 确定每部分公共部分，top bottom bg 音乐 css js 3. 移动端切换用 slide 不是 click ,此处可用swiper轮播插件来切换页面（其实是不太好的，每次刷新都要从头开始一遍，不方便） 4. 此处不用wow（swiper切换不是切换页面，所以wow.js不生效的） 可用swiper里面的swiper-animate（依赖于swiper 和 animate.css）,其用法为： 1. 引入： 顺序如下
<link rel="stylesheet" href="path/to/swiper.min.css"> <link rel="stylesheet" href="path/to/animate.min.css"> <script src="path/to/swiper.min.js"></script> <script src="path/to/swiper.animate.min.js"></script>
2. 初始化时隐藏元素并在需要的时刻开始动画。
<script>
//Swiper3.x、Swiper2.x var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素 swiperAnimate(swiper); //初始化完成开始动画 },
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 }
})
</script>
3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div> 4. 自定义的动画效果：
可以将css中自己写的css-animate-name写入effect中，这样可以在每次slide切换时运行动画 html中添加class=“ani” 和swiper-animate-effect=“动画名”，可以与animate自带的动画一样，在每次切换时运行动画。例如 <img class="ani pic" src="pic.jpg" swiper-animate-effect="shutter2" /> css中定义效果 @-webkit-keyframes shutter2{
from{top: 100%;}
to{top: 0;} }
.shutter2{
-webkit-animation: shutter2 0.5s forwards; animation: shutter2 0.5s forwards; }
注意 ( 自己亲测bug ) ;
（ css中的animate-name要么与class-name相同，要么要用class中完全没有的字母， 因为swiper-animate他是在运行时将effect的动画名作为class传入，不运行时将class中寻找到的字母删除，比如你的class=“fonts”,animate-name="font",他会在不需要的时候删除font，那么原来的 class="fonts" ——> class="s" ,即使在运行animate加入的class也会变为 class="s font" 完全影响到原来的布局 ）
查考文献：
十五、移动端滑屏（更好一些）1. 无依赖（只要一个iSlider.js即可，无需jq等） 2. 体积小 3. 性能上：iSlider借助了手机硬件加速，所有的动画都尽可能重用dom ，并且使用尽可能少dom 来完成整个渲染，支持无尽的滚动，并且在手指快速滑动中也达到流畅的体验 4. 使用简单
引入： <script src="js/iSlider.js" type="text/javascript"></script> HTML：
<div class="wrap" id="wrap">
<div class="item item-0"></div>
<div class="item item-1"></div>
</div>
JS： <script> var myslider=new iSlider({
wrap:'#wrap', item:'.item', isVertical:false, speed:500, onslide:function (index) {
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
}
});
</script> 5. 可同 wow.js 一起使用，只要将 wow 的 new WOW().init( ) 写在slide切换时运行即可，其他同原来一样
6. wow也可使用css中自己写的animate，只要给class添加“wow animate-name”即可，wow-animate比swiper-animate好的一点就是他不对animate-name进行操作，所以此处的animate-name不受限制 7. 可添加音乐
|
