学习fullpage的使用

关于fullpage

fullPage.js 是一个基于jQuery的插件，它用起来非常方便，在是开发网页时通过css的加工可以很轻松的制作一个高大上的全屏网站

支持的功能

1. 支持鼠标滚动与键盘上下移动页面
2.多个回调函数函数
3.支持手机，平板灯触摸事件
4.支持css3动画
5.窗口缩放时自动调整
6.可以设置滚动高度，背景色，滚动速度，回调，文本对齐等

在引入时需要引入jquery1.6以上的版本
引入fullPage.css与fullpage.js
我在写网页的时候引入的是下载好的插件，当然也可以直接引入链接

<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/tool/jquery-1.7.2.min.js"></script>
<script src="js/tool/jquery.fullPage.js"></script>

注意：jQuery的引入必须写在其他js的前面
html页面的基本结构

<div id="fullPage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>

fullpage的操作

$(function(){$("fullPage").fullpage({})
})

fullpage的配置项：

navigation

1.Menu
绑定菜单，设定相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为jquery的选择器

1 section
2 section
3 section
4 section

anchors:['page1','page2','page3','page4'], menu:"#fullpageMenu"

2.anchors：
定义锚链接，默认值为[]，有了锚链接，用户可以迅速定位到某一页面。需要注意的是，锚链接的命名不能与页面中的name和id名重复，尤其是ie浏览器下。而且定义时不需要加#
定位到页面的话，需要在section的div上面加上active的类名

3.Navigation
是否显示导航，默认为false，如果设置为true会显示小圆点儿，作为导航

4.navigationPosition
设置导航小圆点的位置可以是left或者right 默认为right。

5.showActiveTooltip
是否显示当前导航的tooltip信息，默认是不显示（false）

6.slidesNavigation
是否显示横向幻灯片的导航，默认是false

7.SlidesNavPosition
横向幻灯片导航的位置，默认为bottom，可以设置为top或者bottom
8.scrollBar：
是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条会出现，页面的滚动还是按页滚动，但是滚动条的默认行为也有效。

scrolling

1.scrollingSpeed：滚动速度单位(毫秒)

2.autoScrolling：是否使用插件的滚动方式，默认为true，如果选择false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来进行滚动。

3.easing:定义页面section滚动的动画方式，默认为easeInOutCubic,如果修改此项，需要引入jquery.easings的动画插件，或者是jquery.ui

4.loopTop：
滚动到最顶部后是否连续滚动到底部，默认为false

5.loopBottom
滚动到最底部后是否连续滚回到最顶部，默认为false

6.loopHorizontal
横向slider幻灯片是否循环滚动，默认为true

7…scrollOverflow：内容超过满屏后是否显示滚动条，默认为false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合。Slimscroll插件的主要是用于模拟传统浏览器的滚动条样式

8.tochuSensitivity：在移动端设备上滑动页面的敏感性，默认为5，是按百分比来衡量的，最高为100，越大则越难滑动

Accessibility

1.keyboardScrolling：是否可以使用键盘方向键导航，默认值为true

2…animateAnchor：锚链接是否可以控制页面滚动动画，默认为true。如果设置为false，则通过锚链接定位到页面某个点不会有动画效果

3.recordHistory：是否记录历史记录，默认为true可以记录页面的滚动历史，通过浏览器的前进后退按钮来进行导航。注意：如果设置了autoScrolling：false，那么这个配置项也会被关闭，即设置为false

design

1.sectionsColor:可以为每一个section设置background-color属性
2.controlArrows：控制slide幻灯片箭头的显隐，当为flase时箭头隐藏，默认箭头显示

3.verticalCentered:控制每一页的内容是否垂直居中显示，默认为true，一般我们都使用默认值

4.resize：控制字体是否随窗口缩放而缩放，默认为false

5…paddingTop/paddingBottom:
设置每一个section页面顶部和底部的padding值，默认为0，但是当页面上有固定在顶部或者底部的菜单或者导航栏的时候，可以使用这两项进行配置。（paddingTop:“200px”）

6.fixedElements：固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不变。

events fullpage的回调函数

1.afterLoad（anchorLink，index）
滚动到某一section，且滚动结束后，会触发一次此回调函数。函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计数。
我们可以根据nchorLink和index这两个参数值的判断，触发相应的事件。
afterLoad:function(anchorLink，index){ }
2.onLeave（index，nextIndex，direction）
index 是离开的“页面”的序号，从1开始计算
nextIndex 是滚动到的“页面”的序号，从1开始计算
direction 判断往上滚动还是往下滚动，值是 up 或 down
通过return false可以取消滚动
3.afterRender（）
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
4.afterResize（）
浏览器窗口尺寸发生改变之后的回调函数
5.afterSlideLoad（anchorLink，index，slideAnchor，slideIndex）
滚动到某一幻灯片发生的回调函数，与afterLoad相似，接收anchorLink，index，slideIndex，direction这四个参数
6.onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）
在我们离开一个slide时，会触发一次此回调函数，与onLeave相似，接收anchorLink、index、slideIndex、direction这四个参数

最后附上自己写的网页的部分代码