常用插件二、全屏插件fullPage.js

fullPage的github下载地址：https://github.com/alvarotrigo/fullPage.js。github上包含了很多的案例。文档也是参考github的使用说明

fullPage demo：http://www.dowebok.com/demo/143/

一、fullPage引入和使用

1、引入插件

全屏插件fullPage.js依赖jQuery。我下载的是fullPage2.9.6版本，依赖jQuery1.6.0及以上的版本。

先引入jQuery文件，再引入插件：

2、编写HTML

默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。

  
section 1
  
section 2
  
section 3
  
section 4

假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕，例如定义下面的代码：

section 3

Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

  
slide 1
  
slide 2
  
slide 3
  
slide4

3、初始化FullPage

$(document).ready(function() {
    $('#fullpage').fullpage();
});

fullPage函数可以传入参数options，options是一个对象，用于配置fullPage。

比如如果需要循环演示，即最后一页滚动后跳转到第一页，将选项continuousVertical设置为true。

$(document).ready(function() {
    $('#fullpage').fullpage({continuousVertical:true});
});

二、fullPage的参数、函数、回调函数

1、参数

controlArrows	true	是否使用控制箭头向左或向右移动幻灯片
verticalCentered	true	初始化后，是否垂直居中网页的内容。如果你想自定义元素的位置，那就设置为false，在插件初始化后调用afterrender回调函数加载其它的脚本库设置你网页的内容
resize	true	在窗口改变大小后，自动调整网页中字体的大小。这个参数可能旧版有的，但2.9.6没有这个参数。网上其他文章很多写到这个参数。
scrollingSpeed	700	每个屏幕滚动动画执行的时间，单位为毫秒（ms）
sectionsColor	[]	每个section的CSS背景演示。值为数组。若屏幕个数多于设置的颜色个数，多的屏幕默认没有背景颜色；若屏幕个数少于设置的颜色个数，那么后面颜色不起作用。
anchors	[]	定义导航的锚文本。览器通过此锚文本链接可以支持前进和后退按钮功能。这个可作为用户的书签，当用户打开带有锚文本的URL时，Fullpage可以自动跳转到对应的section屏幕或者slide幻灯片位置。注意，锚文本其实就是id，应当是唯一的。
lockAnchors	false	是否锁定锚点。如果设置为true，那么定义滚动时链接中的锚点不变，但函数、回调还是可以访问到锚点。这个配置使用的比较少。
loopHorizontal	true	水平的幻灯片是否循环切换
continuousHorizontal	false	幻灯片向左滚动到第一个，是否应该直接滚动到最后一个；或向右滚动到最有一个是否应该直接滚动到第一个。和loopHorizontal不兼容。扩展功能，并要求fullPage>=2.8.3
continuousVertical	false	屏幕向下滚动到最后一个是否应该直接滚动到第一个；或向上滚动到第一个是否应该直接滚动到最后一个。和loopTop、loopBottom、浏览器任何scrollBar(scrollBar:true或autoScrolling:false)都不兼容。如果同时设置continuousVertical、loopTop/loopBottom为true，保留的是looTop/loopBottom为true的效果。
loopTop	false	滚动到第一屏后，是否循序滚动到最后一屏（循序滚动是指从第一屏挨个滚动到最后一屏，滚动速度会加快）
loopBottom	false	滚动到最后一屏后，是否循序滚动到第一个（循序滚动是指从最后一屏挨个滚动到第一屏，滚动速度会加快）
css3	true	使用JS还是CSS3滚动屏幕或幻灯片。如果设置为true，但浏览器不支持CSS3，将会用jQuery回调函数替代。开启这个属性，对于支持CSS3的平板电脑、移动设备，可以加快动画速度。
autoScrolling	true	屏幕是否自动滚动，还是用户触发才会滚动。设置为true，用户拉动滚动条，会自动滚动到下一屏；如果为false，用户拉动多少，往下动多少距离。
fitToSection	true	是否自适应整个窗口的空间。设置为true时，停止滚动时当前屏将填充到整个页面，否者用户可以停留在网页的任何位置。
scrollBar	false	是否使用浏览器的滚动条。设置为true时，autoScrolling配置仍然生效，用户可以拉动滚动条。效果和滚动鼠标滚轮一样。
paddingTop	0	设置每个屏的上内边距。值是数值 + 单位，如：paddingTop:'10px'。在使用固定头部的时候有用，可以为其留下显示空间。
paddingBottom	0	设置每个屏的下内边距。和paddingTop类似。在使用固定底部的时候有用，可以为其留下显示空间。
fixedElements	null	固定元素，默认为null，需要配置一个jquery选择器。在页面滚动时，fixElements设置的元素不滚动（通过将这个元素移到下面）。
normalScrollElements	null	如果你有些元素需要避免自滚动，你需要设置这个选项。值要设置为这些元素的 jQuery选择器，比如： '#element1, .element2'。设置完后，当鼠标在这些元素上拉动滚轮时，不会触发自滚动。这里不要把屏或幻灯片设置为避免自滚动。
normalScrollElementTouchThreshold	5	在触摸设备上起作用。但具体作用是？
bigSectionsDestination	null	当屏的大小大于视口的大小时，是显示哪一部分。可选值为null，top，bottom。默认值与滚动方向有关，如果是向下滚动到当前屏，默认值是top；如果是向上滚动到当前屏，默认值是bottom。
keyboardScrolling	true	能否通过键盘导航，即切换屏/幻灯片
touchSensitivity	5	浏览器窗口的宽度/高度的百分比，用于确定多远的触摸滑动可以切换到下一屏或下一个幻灯片
scrollHorizontally	false	能够通过鼠标滚动或触控板的滚动条去滚动。这是扩展功能，要求fullPage>=2.8.3。
animateAnchor	true	当网页的URL中有锚文本的时候，定位到屏或幻灯片时，是否通过动画的形式（由某个屏/幻灯片切换到当前屏/幻灯片的动画）。true表示通过动画,false表示直接显示效果。
recordHistory	true	是否要将网页滚动的状态记录到浏览器历史访问记录中。如果加入，可支持后退、前进。当autoScrolling值为false，将会取消自动置位false。
menu	false	用来指定和屏关联的菜单。当滚动到某一屏时，会为该菜单子元素加上active类。要让菜单子元素和屏对应起来，需要给菜单子元素添加一个HTML5的自定义属性（data-menuanchor），需要和锚文本设置相同的内容。
navigation	false	如果设置为true，将会显示一个小圆圈组成的快速导航栏。显示在幻灯片左方或右方。
navigationPosition	none	结合参数navigation一起使用，用于设置快速导航栏的位置，可以设置为字符left/right。
navigationTooltips	[]	定义当navigation设置为true的时候，鼠标移动到快速导航上面的提示文本，每个属性中间用英文半角逗号（,）隔开。
showActiveTooltip	false	设置是否一直显示navigationTooltips中当前屏对应的提示文本。
slidesNavigation	false	同navigation。不过这个参数是用于设置幻灯片的，并且导航显示位置不同，显示在幻灯片上方或下方。
slidesNavPosition	bottom	slidesNavigation中设置的导航菜单显示的位置，可选的设置值为top/bottom。如果你想修改导航距离顶部的距离或者颜色等样式，需要修改CSS样式。
scrollOverflow	false	这个选项IE8不兼容，用于设置当内容超过屏幕的高度的时候，是否裁切多余的内容。 设置会true时，多余内容会被自动裁切。可以使用afterRender回调函数来处理多出的内容； 设置为false时，多余内容不会被裁切，但剩下的内容仍然不能显示。可以通过scrolloverflow.min.js插件来自定义滚动事件。这个插件要在jQuery之后、fullPage.js之前引入
sectionSelector	.section	定义用于选择屏的jQuery选择器。有时候为了和避免和其他插件冲突，需要改成.section以外的其他值。
slideSelector	.slide	定义用于选择幻灯片的jQuery选择器。有时候为了和避免和其他插件冲突，需要改成.section以外的其他值。
responsiveWidth	0	当窗口缩放到这个宽度值以下，屏幕不再自滚动（autoScrolling:false），而是会出现浏览器自带的滚动条。并且会给加上fp-responsive类，便于用户设置自适应样式。
responsiveHeight	0	当窗口缩放到这个高度值以下，屏幕不再自滚动（autoScrolling:false）而是会出现浏览器自带的滚动条。并且会给加上fp-responsive类，便于用户设置自适应样式。

疑问：

1）scrollBar表示显示浏览器滚动条。当fitToSection为false，即使autoScrolling设置为true，拉动浏览器滚动条不会发生自滚动，但是拉动鼠标滚轮会。这跟文档描述似乎不一致

2）normalScrollElementTouchThreshold啥意思

3）continuousHorizontal、scrollHorizontally等不起作用

答：需要安装扩展文件。目前需要收费。

选项menu使用案例：

	
First section
	
Second section
	
Third section
	
Fourth section


  
section 1
  
section 2
  
section 3
  
section 4

2、方法

使用：$.fn.fullpage.方法。比如：$.fn.fullpage.moveSectionUp()。

moveSectionUp()	向上滚动一屏。如：$.fn.fullpage.moveSectionUp()
moveSectionDown()	向下滚动一屏。如：$.fn.fullpage.moveSectionDown()
moveTo(section, slide)	滚动到指定屏的指定幻灯片。section可以是调用fullPage()的anchors参数指定的值，也可以是数值，1表示第一屏；slide是数值，0表示第一个幻灯片。 比如： $.fn.fullpage.moveTo('firstSlide', 2);跳转到firstSlide屏的第三个幻灯片             $.fn.fullpage.moveTo(1)跳转到第一屏的第一个幻灯片。
moveSlideRight()	向右滚动到下一个幻灯片。
moveSlideLeft()	向左滚动到上一个幻灯片。
setAutoScrolling(boolean)	设置页面滚动方式，设置为 true 时自动滚动。为false时显示浏览器自带的滚动条
fitToSection()	滚动离得最近的活动屏，让活动屏适应视口显示
setLockAnchors(lockAnchors)	是否锁定锚点。lockAnchors为boolean。设置为true时，锚点不会影响url；为false时，锚点会影响url的值
setAllowScrolling(boolean, [directions])	添加或移除鼠标滚轮/触控板的滚动允许值。默认是都允许的。 参数value是boolean，true表示增加滚动允许值，false表示移除滚动允许值。 参数direction可为all, up, down, left, right，或者这几个值的结合。多个值之间用逗号分隔，比如：$.fn.fullpage.setAllowScrolling(false, 'down, right')。
setKeyboardScrolling(boolean, [directions])	添加或移除键盘的滚动允许值。比如：$.fn.fullpage.setKeyboardScrolling(false, 'down, right'); 参数value是boolean，true表示增加滚动允许值，false表示移除滚动允许值。 参数direction可为all, up, down, left, right，或者这几个值的结合。多个值之间用逗号分隔，比如：$.fn.fullpage.setKeyboardScrolling(false, 'down, right');
setScrollingSpeed()	定义以毫秒为单位的滚动速度。
destroy(type)	参数为空或'all'。如果传入all，所有fullPage.js生成的html标签和样式都会移除。

3、回调函数

afterLoad	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave	滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
onSlideLeave	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
afterSlideLoad	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

回调函数使用案例如下：

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);

		if(index == 3){
			alert("Section 3 ended loading");
		}

		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});