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

最新推荐文章于 2021-04-18 12:06:28 发布

置顶碎碎念先生

最新推荐文章于 2021-04-18 12:06:28 发布

阅读量719

点赞数 1

分类专栏： h5 文章标签： zepto 滑屏 fullpage 移动 zepto.fullpage

本文链接：https://blog.csdn.net/weixin_38684316/article/details/94389035

版权

h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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的方法列表如下：

update
update
moveTo
movePrev
moveNext
start
stop
getCurIndex

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

update

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

moveTo

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

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

movePrev

向前一屏，是对moveTo的封装

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

moveNext

向后一屏，是对moveTo的封装

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

start

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

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

stop

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

getCurIndex

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

return {Number} 当前位于第几屏

具体案例：

引入的部分链接

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

<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;
                }
            }
        });
        ```