fullpage回调函数
fullpage.jpg
一、afterLoad（anchorLink,index）
滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。
注：我们可以根据anchorLink和index参数值的判断，触发相应的事件。示例代码如下：
<!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" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
<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'],
//在谷歌浏览器的的控制台查看结果
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
}
});
});
</script>
</body>
</html>
二、onLeave(index,nextIndex,direction)
在离开一个section时，会触发一次此回调函数，接收index、nextIndex和direction3个参数：
index是离开的页面的序号，从1开始计算；
nextIndex是滚动到的目的页面的序号，从1开始计算；
direction判断是网上滚动还是往下滚动，值是up或down。
注：通过return false;可以取消滚动。
三、afterRender()
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。
四、afterResize()
浏览器窗口尺寸改变后的回调函数。
五、afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某一幻灯片的回调函数，与afterLoad类似，接收anchorLink、index、slideAnchor、slideIndex4个参数。
六、onSlideLeave
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex);
在我们离开一个slide时，会触发一次此回调函数，与onLeave类似。示例代码如下：
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
anchors:['page1','page2','page3','page4'],
//在谷歌浏览器的的控制台查看结果(onLeave在 afterLoad之前触发)
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>
