About fullpage.js in Muke

1.如何在页面中引入fullpage.js？通过https://cdnjs.com/libraries/fullPage.js,分别引入

<pre name="code" class="html"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.css">
    <!-- 先引入jq -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/vendors/jquery.easings.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.js"></script>

2.建立基本的html结构

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

3.给每一个section,添加slide(幻灯片效果）

 <div class="section">
    <!-- 给每一个页添加幻灯片效果 -->
        <div class="slide">slide1</div>
        <div class="slide">slide2</div>
        <div class="slide">slide3</div>
        <div class="slide">slide4</div>
    </div>

4.使用fullpage

$(function(){
		$("#fullpage").fullpage({
			
		});
	})

5.相关参数

sectionsColor 为每一个section设置颜色

controlArrows                                              设置是否通过箭头控制幻灯片，默认为true

verticalCentered 设置每一页的内容是否垂直居中，默认为true

resize                                                            字体的内容是否跟着窗口的大小改变,默认为false;

scrollingSpeed                                           页面滚动速度，默认为700ms

anchors        定义锚链接，默认值为【】，注意定义锚链接的时候，值不能与页面的任一name和id相同，而且定义时不需加#

lockAchors      是否锁定锚链接，默认为false

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

css3                                                            是否使用CSS3 transforms来实现滚动效果，默认设置为true,配置项可以提高支持CSS3的浏览器

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

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

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

autoScrolling                                            是否使用插件的滚动方式，默认为true,如果选择false，则使用浏览器自带的滚动条，不会按页滚动，而是根据浏览器的默   认行为来滚动

scrollBar                                                    是否包含滚动条，默认为false,如果设置为true,则浏览器默认的滚动条出现，页面滚动时还是按页滚动，当autoScrooling,scrollBar都为                                                                         true,  滚动和拖动有不同的效果

paddingTop/paddingBottom                 设置每一个section顶部和底部的padding,默认都为0，一般如果我们需要设置一个固定在顶部或者底部的导航条时，可 以 使用这两个配                                                                      置项

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

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

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

continuousVertical              是否循环滚动，默认为false.如果设置为true,则页面会循环滚动，而不像loopTop或者loopBottom那样出现跳动，注意这个属性 和                                                                                  loopTop,loopBottom不兼容，不能同时设置

animateAnchor:                                       锚链接是否可以控制滚动动画，默认为true,如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果

recordHistory                                           是否记录历史，默认为true,可以记录页面滚动的历史，通过浏览器的前进后退来导航，如果设置了autoScrolling:false,那么这个配置也将                                                                      关  闭，即设置为false

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

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

navigationPosition                                导航小圆点的位置，可以设置为left或者right

navigationTooltips                                 导航小圆点的tooltips设置，默认为【】，注意按照顺序设置

showActiveTooltip                                  是否显示当前页面的导航的tooltip信息，默认为false

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

slidesNavPosition                                  横向幻灯片导航的位置，默认为bottom,可以设置为top或者bottom

scrollOverflow                                           内容超过满屏后是否显示滚动条，默认为false,如果设置为true,则会显示滚动条，如果要滚动查看页面内容，还需                                                                                                             jquery,iscroll插件的配合。iscroll插件主要用于模拟系统的浏览器滚动条

sectionSelector                                      section的选择器，默认为.section

slideSelector                                          slide的选择器，默认为.slide

6.相关方法

moveSectionUp()                                                    向上滚动一页

moveSectionDown()                                               向下滚动一页

moveTo(section,slide)                                           滚到第几页，第几个幻灯片，注意页面是从一开始，而幻灯片是从0开始

silentMoveTo(section,slide)                                   滚动到第几页，和moveTo一样，但是没有动画效果

moveSlideRight():                                                    幻灯片向右滚动

moveSlideLeft()                                                        幻灯片向左滚动

setAutoScrolling(boolean) 动态设置autoScrolling

setLockAnchors(boolean) 动态设置lockAnchors

setRecordHistory(boolean) 动态设置RecordHistory

setScrollingSpeed(milliseconds) 动态设置scrollingSpeed

setAllowScrolling(boolean,[directions]) 添加或删除鼠标滚轮、滑动控制，第一个参数true为启用，false为禁用，后面的参数为方向，取值包括all,up,down,left,right,可 以使用多个，分隔

destroy(type) 销毁fullpage特效，type可以不写，或者使用all,如果不写type,fullpage给页面添加的样式和html元素还在，如果使用all，则样式 ， HTML等全部销毁，页面恢复和不使用fullpage相同的效果

reBuild() 重新更新页面和尺寸，用于通过Ajax请求改变页面结构之后，重建效果

afterLoad(anchorLink,index) 滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚 链接的 名称 index是序号，从一开始计算

onLeave(index.nextIndex,direction) 在我们离开一个section时，会触发一次此回调函数，接收index，nextIndex和direction 3个参数：index是离开的“页面”的序号 ，从1开始计算nextIndex 是滚动到的目标“页面”的序号，从一开始计算direction判断向上还是向下，值是up或者down returnfal可 以取消滚动

afterRender() 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。

afterResize() 浏览器窗口尺寸改变后的回调函数

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex) 滚动到某一幻灯片后的回调函数，与afterLoad类似

onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)