fullpage回調(diào)函數(shù)
fullpage.jpg
一、afterLoad（anchorLink,index）
滾動到某一section辆它，且滾動結(jié)束后户矢，會觸發(fā)一次此回調(diào)函數(shù)，函數(shù)接收anchorLink和index兩個參數(shù)廓啊，anchorLink是錨鏈接的名稱，index是序號询微，從1開始計算崖瞭。
注：我們可以根據(jù)anchorLink和index參數(shù)值的判斷狂巢，觸發(fā)相應(yīng)的事件撑毛。示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Fullpage簡單例子</title>
<link rel="stylesheet" />
<style type="text/css">
body{
color:#fff;/*文字為白色*/
}
.slide{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section"><h1>這是第一屏</h1></div>
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
<div class="slide">slide5</div>
<div class="slide">slide6</div>
</div>
<div class="section"><h1>這是第三屏</h1></div>
<div class="section"><h1>這是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--配置項使用-->
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
anchors:['page1','page2','page3','page4'],
//在谷歌瀏覽器的的控制臺查看結(jié)果
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
}
});
});
</script>
</body>
</html>
二、onLeave(index,nextIndex,direction)
在離開一個section時唧领，會觸發(fā)一次此回調(diào)函數(shù)藻雌，接收index、nextIndex和direction3個參數(shù)：
index是離開的頁面的序號斩个，從1開始計算胯杭；
nextIndex是滾動到的目的頁面的序號，從1開始計算受啥；
direction判斷是網(wǎng)上滾動還是往下滾動做个，值是up或down鸽心。
注：通過return false;可以取消滾動。
三居暖、afterRender()
頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)顽频，或者說頁面初始化完成后的回調(diào)函數(shù)。
四太闺、afterResize()
瀏覽器窗口尺寸改變后的回調(diào)函數(shù)糯景。
五、afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滾動到某一幻燈片的回調(diào)函數(shù)省骂，與afterLoad類似蟀淮，接收anchorLink、index钞澳、slideAnchor怠惶、slideIndex4個參數(shù)。
六轧粟、onSlideLeave
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex);
在我們離開一個slide時甚疟，會觸發(fā)一次此回調(diào)函數(shù)，與onLeave類似逃延。示例代碼如下：
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
anchors:['page1','page2','page3','page4'],
//在谷歌瀏覽器的的控制臺查看結(jié)果(onLeave在 afterLoad之前觸發(fā))
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
},
onLeave:function(index,nextIndex,direction){
console.log("onLeave:index="+index+";nextIndex="+nextIndex+";direction="+direction);
},
afterRender:function(){
console.log("afterRender");
},
afterResize:function(){
console.log("afterResize");
},
});
});
</script>
