配置項介紹
fullpage.jpg
十六、touchSensitivity:
在移動設備中滑動頁面的敏感性，默認為5，是按百分比來衡量，最高為100，越大則越難滑動。
十七、continuousVertical:
頁面是否循環滾動，默認為false，如果設置為true，則頁面會循環滾動，而不是像loopTop或loopBottom那樣出現跳動。
注：這個屬性和loopTop、loopBottom不兼容，不能同時設置。
十八、animateAnchor:
錨鏈接是否可以控制滾動動畫，默認為true。如果設置為false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果。
十九、recordHistory:
是否記錄歷史，默認為true，可以記錄頁面滾動的歷史，通過瀏覽器的前進后退來導航。
注：如果設置了autoScrolling:false，那么這個配置也將被關閉，即設置為false。
二十、menu:
綁定菜單，設置的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false，可以設置為菜單的jquery選擇器。示例代碼如下：
<!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;
}
#fullpageMenu{
font-size:30px;
position: fixed;
top:0;
z-index: 999;
}
</style>
</head>
<body>
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
<li data-menuanchor="page2"><a href="#page2">2 section</a></li>
<li data-menuanchor="page3"><a href="#page3">3 section</a></li>
<li data-menuanchor="page4"><a href="#page4">4 section</a></li>
</ul>
<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'],
//css3:true,
//loopTop:true,
//loopBottom:true,
//loopHorizontal:false
//autoScrolling:false
//scrollBar:true
//paddingTop:'200px',
//paddingBottom:'200px',
//continuousVertical:true
menu:'#fullpageMenu',
});
});
</script>
</body>
</html>
二十一、navigation:
是否顯示導航，默認為false，如果設置為true，會顯示小圓點作為導航。
（1）navigationPosition:
導航小圓點的位置，可以設置為left或right。
（2）navigationTooltips:
導航小圓點的tooltips設置，默認為[]，注意按照順序設置。
示例代碼如下：
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
//導航小圓點的設置
navigation:true,
navigationPosition:'right',
navigationTooltips:['page1','page2','page3','page4'],
slidesNavigation:true,
slidesNavPosition:'top',
});
});
</script>
二十二、scrollOverflow:
內容超過滿屏后是否顯示滾動條，默認為false。如果設置為true，則會顯示滾動條，如果要滾動查看內容，還需要jquery.slimscroll插件的配合。slimscroll插件主要用于模擬傳統的瀏覽器的滾動條。
二十三、sectionSelector:
section的選擇器，默認為.section。
二十四、slideSelector:
slide的選擇器，默認為.slide。
