fullpage控制项汇总（1）

一、一般配置项

1. 在页面结构加载完之后，调用fullpage()方法实现整个单页面切换的功能。

('#fullpage').fullpage();
})
//后面所有的控制项，均写在fullpage()内部,多个控制项之间用逗号隔开。

2. 通过sectionsColor控制每个页面的背景色。

$('#fullpage').fullpage({
sectionsColor:['red','green','blue']
})

3. controlArrows控制是否显示幻灯片左右两边的箭头，默认值为true，即显示。

需要借助fullpage.css
$('#fullpage').fullpage({
controlArrows:false
})

4. verticalCentered控制每个section的文字上下是否居中，默认为true。

$('#fullpage').fullpage({
controlArrows:false,
verticalCentered:false
})

5. resize控制section里文字的字体大小是否岁窗口缩放，默认为false。

resize:true

6. scrollingSpeed设置页面间滚动切换的速度，默认为700ms。

scrollingSpeed:1000

7. anchors为每个section页面添加锚链接，当页面滚动到某个页面的时候，地址栏的后面会追加对应锚链接的值。通过这种方式可以直接定位我们想要出现的页面。

anchor:['page1','page2','page3']

8. lockAnchor锁定锚链接，页面滚动切换的时候，地址栏的地址是否发生改变。

lockAnchor:true

9. css3设置是否支持css3的动画效果，默认为true。如果设置为false或者在不支持css3的浏览器下则利用JQ模拟动画效果。

css3:true/false

二、滚动配置项

1. loopTop 当页面滚动到最顶部之后，是否滚动到最底部进行循环滚动，默认为false。

loopTop:false/true

2. loopBottom 当页面滚动到最底部之后，是否滚动到最顶部进行循环滚动，默认为false。

loopBottom:false/true

3. loopHorizontal 页面中的横向幻灯片是否循环滚动，默认为true。

loopHorizontal:true/false

4. autoScrolling是否使用fullpage自己的滚动方式，默认为true。如果设置为false，页面将不会按页切换。

autoScrolling:true/false

5. scrollBar 是否显示浏览器自带的滚动条，默认为false。

scrollBar:false/true

6. paddingTop与paddingBottom 为每个section设置上下的内边距。

paddingTop:'100px',
paddingBottom:'50px'

7. fixedElements 将某个元素固定在fullpage的页面当中（配合position：fixed），使其不随页面的滚动而滚动。如果只是用css的posirion：fixed对某个元素进行固定定位，该元素会被覆盖。

fixedElements:'#elemId'
//elemId为被固定元素的id

8. keyBoardScrolling是否使用键盘的方向键控制页面滚动，默认为true。

keyBoardScrolling:true/false

9. TouchSensitivity 控制移动设备滑动敏感系数，默认为5，按照百分比来衡量，最高为100，该系数越大则页面越难被滑动。

touchSensitivity：10

10. continuousVertical 控制页面是否循环滚动，不会像loopTop跟loopBottom那样出现一个跳动（与它俩不兼容，不可同时设置），直接顺序循环。默认为false。

continuousVertical:false/true

11.animateAuthor控制是否从第一个section已动画的方式滚动到定位的锚链接，默认为true。

animateAuthor:true/false

三、菜单与导航设置

通过menu控制项给fullpage添加菜单，并且把菜单跟每个页面的锚链接绑定到一起。

菜单代码如下：

导航菜单.png

fullpage控制项如下：
$('#fullpage').fullpage({
anchors:['page1','page2','page3']，//为页面添加锚链接
menu:'#Menu' //生成fullpage菜单

})

1. recordHistory 设置是否由浏览器自带的回退与前进按钮来控制fullpage单页面之间按照历史记录进行切换，即当你通过鼠标滚轮滚动到第三屏之后，可以通过浏览器自带的回退按钮，返回到第二屏跟第一屏。默认为true。

recordHistory:true/false

2. navigation 控制是否显示导航小圆点，默认为false。
   navigationPosition 控制小圆点导航位置，right跟left。
   navigationTooltips 控制鼠标移入小圆点之后的提示。
   showActiveTooltips 是否显示当前section页面的提示文字，默认为false。

navigation:true,
navigationPosition:'right',
navigationTooltips:['page1','page2','page3'],
showActiveTooltips:true

3. slidesNavigation 是否显示横向幻灯片的导航，默认为false。
   slidesNavPosition 幻灯片导航位置，可以为'top'或'bottom'。