配置项介绍
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" 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;
}
#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。
