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