js手机滚屏效果

原文地址：https://github.com/yanhaijing/zepto.fullpage

第一步：基于移动端的浏览体验，在头部添加浏览器渲染的分辨率

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

第二步：引入相关文件

<link rel="stylesheet" href="../src/zepto.fullpage.css">
<script src="js/zepto.min.js"></script>
<script src="../src/zepto.fullpage.js"></script>

第三步：编写基本结构html代码

<div class="wp">
    <div class="wp-inner">
        <div class="page page1">1</div>
        <div class="page page2">2</div>
        <div class="page page3">3</div>
        <div class="page page4">4</div>
    </div>
</div>

第四步：写入启动代码

<script>
    $('.wp-inner').fullpage();
</script>

第五步：编写必须的css样式

.wp{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.page{
    font-size: 72px;
    line-height: 320px;
    text-align: center;
}
.page1{
    background: red;
}
.page2{
    background: yellow;
}
.page3{
    background: maroon;
}
.page4{
    background: green;
}

其他api参数请看官方网站：https://github.com/yanhaijing/zepto.fullpage/blob/master/doc/api.md