fullpage得基本使用

Fullpage.js是一个基于jquery的全屏滚动插件，他可以非常方便、很轻松的制作一个全屏网站：

• 支持鼠标滚动
• 多个回调函数
• 支持手机、平板等触摸事件
• .支持css3动画
• 支持窗口缩放
• .窗口缩放时自动调整
• .可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

这个插件基于jQuery，所以你需要引入jQuery，并且在Fullpage插件之前引入需要引入jquery1.6以上的任意版本。

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
<script src="/fullpage/jquery.min.js"></script>
<script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

自定义页面滚动的效果，引入jquery.easings.min.js文件。

<script src="/fullpage/jquery.easings.min.js"></script>

对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。

<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>

fullPage.js兼容性
jQuery兼容：兼容jQuery1.6以上的版本
浏览器兼容：兼容IE8以上，Chrome，Firefox，Opera，Safari

页面结构：

<div id="fullpage">
<div class="section">something</div>
<div class="section">something</div>
<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>
</div>
<div class="section">something</div>
</div>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

<div class="section active"></div>

触发fullpage效果：

<script>
    $(document).ready(function(){
        $('#fullpage').fullpage();
    })
</script>

Fullpage的属性：

• .sectionsColor:可以为每一个section设置background-color属性[‘red’,‘green’,‘blue’,‘gray’]
• .controlArrows：定义是否通过箭头来控制slide,默认true
• verticalCentered:控制每一页的内容是否垂直居中显示，默认为true，
• .resize：控制字体是否随窗口缩放而缩放，默认为false
• .scrollingSpeed:控制页面滚动速度，默认为700
• .easing:定义页面section滚动的动画方式，默认为easeInOutCubic,如果修改此项，需要引入jquery.easings的动画插件，或者是jquery.ui
• .css3:是否使用css3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器或者是移动端的效果和速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果（优雅降级）。
• .loopTop：滚动到最顶部后是否连续滚动到底部，默认为false
• .loopBottom滚动到最底部后是否连续滚回到最顶部，默认为false
• .loopHorizontal横向slider幻灯片是否循环滚动，默认为true
• .scrollBar：是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条会出现，页面的滚动是按页滚动，但是滚动条的默认行为也有效。
• .paddingTop/paddingBottom:设置每一个section页面顶部和底部的padding值，默认为0，
• .fixedElements固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不变。
• .keyboardScrolling是否可以使用键盘方向键导航，默认值为true
• .tochuSensitivity在移动端设备上滑动页面的敏感性，默认为5，是按百分比来衡量的，最高为100，越大则越难滑动
• .continuousVertical：页面是否循环滚动，默认为falsecontinuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
• .animateAnchor锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
• .Navigation是否显示导航，默认为false，如果设置为true会显示小圆点儿，作为导航
• .navigationPosition设置导航小圆点的位置 可以是left或者right 默认为right
• .navigationTooltips导航小圆点的tooltips设置，默认为[]，注意按照顺序设置
• .showActiveTooltip是否显示当前导航的tooltip信息，默认是不显示（false）
• .slidesNavigation是否显示横向幻灯片的导航，默认是false
• .SlidesNavPosition横向幻灯片导航的位置，默认为bottom，可以设置为top或者bottom

Fullpage的回调函数：
1.afterLoad（anchorLink，index）滚动到某一section，且滚动结束后，会触发一次此回调函数。anchorLink是锚链接的名称，index是序号，从1开始计数。
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）滚动到某一幻灯片发生的回调函数，
6.onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）在我们离开一个slide时，会触发一次此回调函数，，