zepto.fullpage移动端最好用的滑屏插件

zepto.fullpage在这里主要是用作移动端无缝滑屏滚动

具体调用方式：
$('el').fullpage({
    page: '.page',
    start: 0,
    duration: 500,
    drag: false,
    loop: false,
    dir: 'v',
    change: function () {},
    beforeChange: function () {},
    afterChange: function () {},
    orientationchange: function () {}
});
           

el

当前包裹容器的class名或者id名

page

每一屏容器的类名，如第一屏：.page1

start

从第几屏开始，默认是第一屏

duration

每屏动画切换的时间，默认是500ms

drag

是否开启拖动功能，默认关闭。

loop

是否开启循环滚动，默认false

dir

切换方向，默认垂直方向(v|h)

当前屏幕的方向 portrait 竖屏 landscape 横屏

der

当滑动距离大于一个值时，才会引起滑动现象，滑动距离=der*屏幕高度|宽度，默认值为0.1

change/beforeChange/afterChange

当切换屏幕时会触发的事件

e {Object} 事件的参数

e包含两个属性prev和cur，表示上一屏index和下一屏index

orientationchange

当屏幕发生旋转时的回调。

方法

通过方法，可以改变fullPage内部的状态，fullPage的方法列表如下：

1. update
2. update
3. moveTo
4. movePrev
5. moveNext
6. start
7. stop
8. getCurIndex

具体使用如：$.fn.fullpage.update();
           

update

此方法会重新计算和渲染每屏的高度，当你发现如果每屏的高度有问题时，手动调用下此方法就可以了。

moveTo

切换到指定屏，如果指定的屏数大于屏总数或小于0，都会做修正处理。

1. next {Number} 必须 要切换到的屏索引
2. anim {Bollean} 可省略 是否有动画 默认为没有动画效果

movePrev

向前一屏，是对moveTo的封装

-anim {Bollean} 可省略 是否有动画 默认为没有动画效果

moveNext

向后一屏，是对moveTo的封装

-anim {Bollean} 可省略 是否有动画 默认为没有动画效果

start

开启切换功能，和stop配合使用。

丰富页面功能，比如到了某页需要点击某个元素后才能到下一页的时候 这个就有用了～～

stop

关闭切换功能，和start配合使用

getCurIndex

获取当前位于第一屏的方法。

1. return {Number} 当前位于第几屏

具体案例：

引入的部分链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zepto.fullpage/0.5.0/zepto.fullpage.min.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" target="_blank" rel="external nofollow" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto.fullpage/0.5.0/zepto.fullpage.min.js"></script>
           

html

<div class="wp">
        <div class="wp-inner">
            <div class="page page1">
                <img src="img/page1-1.png" class="one">
                <img src="img/page1-2.png" class="two">
                <p><span><b>></b>滑动解锁</span></p>
            </div>
            <div class="page page2">
                <p>
                    <span>回顾公众号的2016</span>
                    <img src="img/page2-2.png" class="one">
                </p>
            </div>
            <div class="page page3">
                <img src="img/page3-1.png" class="one">
                <img src="img/page3-2.png" class="two">
            </div>
        </div>
    </div>
           

css

@charset "utf-8";
*{
    padding: 0;
    margin: 0 auto;
    box-sizing:border-box;
}
li{
    list-style: none;
}
section{
    display: block;
}
.wp{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;            
}
.page{
    /*font-size: 72px;*/
    /*line-height: 320px;*/
    color: #fff;
    text-align: center;
    background: url(../img/bg.jpg) no-repeat center center/100% 100%;
    position: relative;
}

/* page common start */
.page .common{
    width: 62.5%;
    margin-top: 10%;
}
/* page common end */

/* page1 start */
.page1 .one{
    width: 138px;
    margin-top: 5%;
}
.page1 .two{
    width: 96%;
    margin-top: 20%;
    opacity: 0;
}
.page1 p{
    margin-top: 50%;
    font-size: 18px;
    font-weight: bold;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    opacity: 0;
}
.page1 p span{
    -webkit-background-clip: text;    /*按文字裁剪*/        
    -webkit-text-fill-color: transparent;    /*文字的颜色使用背景色*/    
    background-color:#19385c;    /*设置一个背景色*/        
    background-image: -webkit-linear-gradient(-45deg, rgba(153, 153, 153, 0.6) 30%, #fff 50%, rgba(153, 153, 153, 0.6) 70%);        /*设置渐变的背景，按对角线渐变*/
    background-blend-mode: hard-light;    /*设置背景为混合模式下的强光模式*/
    background-size: 200%;
    animation: shine 4s infinite;           /*给背景添加动画改变位置*/
    -webkit-animation: shine 4s infinite;
}
.page1 p span b{
    margin-right: 5px;
}
/* page1 end */

/* page2 start */
.page2 {
    background-image: url(../img/page2-1.jpg);
}
/*.page2 .one{
    width: 88%;
    position: absolute;
    bottom: 20%;
    left: 50%;
    margin-left: -44%;
}*/
.page2 p{
    width: 88%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #fff;
    background-color: #19ad17;
    border-radius: 5px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    margin-left: -44%;
}
.page2 .one{
    position: absolute;
    left: 0%;
    top: 0;
    height: 100%;
    animation: slide 2s infinite ease-in;
    -webkit-animation: slide 2s infinite ease-in;
}
/* page2 end */

/* page3 start */
.page3 .one{
    width: 88%;
    margin-top: 10%;
    -webkit-transform: translate3d(0,-150%,0);
    transform: translate3d(0,-150%,0);
}
.page3 .two{
    width: 98%;
    margin-top: 10%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transform: translate3d(0,250%,0);
    transform: translate3d(0,250%,0);
}
/* page3 end */
           

js方法

$('.wp-inner').fullpage({
            start: 0,
            change: function (e) {
                // 获取页面索引
                var index = e.cur;
                switch(index){
                    case 0:
                        $(".page1 .two").removeClass("animated bounceIn");
                        $(".page1 p").removeClass("animated fadeIn");
                        break;
                    case 1:
                        break;
                    case 2:
                        $(".page3 .one").removeClass("animated fadeInDown");
                        $(".page3 .two").removeClass("animated fadeInUp");
                        break;
                }
            },
            afterChange: function (e) {
                // 获取页面索引
                var index = e.cur;
                switch(index){
                    case 0:
                        $(".page1 .two").addClass("animated bounceIn");
                        $(".page1 p").addClass("animated fadeIn");
                        break;
                    case 1:
                        break;
                    case 2:
                        $(".page3 .one").addClass("animated fadeInDown");
                        $(".page3 .two").addClass("animated fadeInUp");
                        break;
                }
            }
        });
        ```