FullPage.js全屏滚动插件

一、介绍

fullPage.js是一个基于jQuery的插件，他能够很方便、很轻松的制作出全屏网站，主要功能有：

1、支持鼠标滚动

2、多个回调函数

3、支持手机、平板触摸事件

4、支持CSS3动画

5、支持窗口缩放

6、窗口缩放时自动调整

7、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。

如何获取fullPage？github地址：https://github.com/alvarotrigo/fullPage.js

fullPage.js不兼容ie67，其他的浏览器都兼容

文件大小只有7K.很小，基于MIT协议

二、使用

1、需要先引入jQuery

1、引入fullPage样式文件：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>

2、引入jquery文件：

3、引入这个插件，支持更多动画过渡效果：（非必须选的）

4、引入fullPage.js:

上面引入的这四个文件都是cdn上面的文件，可以减轻服务器的压力，提高用户访问速度

2、实现基本的效果

1、基本的页面结构

</div>

在这个页面中包含了若干个class为section的容器，每个section我们可以称为一个页面，所有的这些页面用一个容器包裹，这个包裹的容器不能是body,我们可以用<div id="fullpage">元素作为容器，但是不是必须是这个id，默认显示第一页，就是第一个section。

2、还可以为每一个section页增加slide（幻灯片）

<div class="slide">slide1</div>

<div class="slide">slide2</div>

<div class="slide">slide3</div>

<div class="slide">slide4</div>

</div>

一般section是竖形滚动的，每个section中可以有一组横向滚动的slide，

3、实现基本的效果

激活fullapge效果

在页面载入完成以后

$(document).ready(function(){

$('#fullpage').fullPage(); //最外层包裹的容器上面调用fullPage()方法，方法里面可以有一些配置项

});

eg:

<!DOCTYPE html>

<head>

<title>fullPage简单例子</title>

<style>

.section:first-child{

background:green;

}

.section:nth-child(2){

background-color:#FFC125;

}

.section .slide{

text-align:center;

font-size:30px;

}

</style>

</head>

<body>

<div class="section">这是第一屏</div>

<div class="slide">slide1</div>

<div class="slide">slide2</div>

<div class="slide">slide3</div>

<div class="slide">slide4</div>

</div>

<div class="section">这是第三屏</div>

<div class="section">这是第四屏</div>

</div>

$(document).ready(function(){

$('#fullpage').fullpage();

});

</script>

</body>

</html>

三、fullPage.js API

1、配置项一

$(document).ready(function(){

$('#fullpage').fullpage({

sectionsColor:['green','orage','gray','red'],

controlArrows:false,

})

});

①sectionsColor:

可以为每一个section设置background-color属性

②controlArrows:

定义是否通过箭头来控制slide幻灯片，默认为true，当设置为false时，幻灯片左右的箭头就会消失，在移动设备上我们可以通过滑动来操作幻灯片。

③verticalCentered:

每一页的内容是否垂直居中，默认为true,一般我们保持默认值

④resize:

字体是否随着窗口缩放而缩放，默认为false.

⑤scrollingSpeed:

滚动速度，单位是毫秒，默认是700；（对slide也有效）

⑥anchors: anchor锚 anke

定义锚链接，默认值为[],有了锚链接，用户就可以快速打开定位到某一页面，注意定义锚链接的时候，值不要和页面中任意的id或name相同，尤其是在IE浏览器，而且定义时不需要加#

锚链接会为每个section增加一个链接，显示在地址栏中

anchors:['page1','page2','page3','page4']

每一屏后面会加上#page1或着page2，例如：http://localhost:63342/fullPage.js/API/apiOne.html#page4

我们就可以通过收藏网页，定位到相应的页面，就是页面打开就是第三屏这种效果，而不是默认的第一屏，最上端

要想实现相同的效果，可以在页面中某一个section增加一个active,打开了连接之后能够直接打开第三屏，而不是默认的页面最上端，并且连接地址中也不需要带锚

例如：<div class="section active">第三屏</div>

⑦lockAnchors:

是否锁定锚链接，默认为false,如果设置为true，那么定义的锚链接，也就是anchors属性则无效，这个配置项很少使用。

anchors:['page1','page2','page3','page4'],

lockAnchors:true

这两项同时写进去的话，屏幕上下滑动，url后面没有#page1了，但是url#page3仍然能到达第三屏。

<!DOCTYPE html>

<head>

<title>fullPage简单例子</title>

<style>

.section .slide{

text-align:center;

font-size:30px;

}

</style>

</head>

<body>

<div class="section">这是第一屏</div>

<div class="slide">slide1</div>

<div class="slide">slide2</div>

<div class="slide">slide3</div>

<div class="slide">slide4</div>

</div>

<div class="section active">这是第三屏</div>

<div class="section">这是第四屏</div>

</div>

$(document).ready(function(){

$('#fullpage').fullpage({

sectionsColor:['green','orange','gray','red'],

controlArrows:false,

// verticalCentered:false,

// resize:true,

// scrollingSpeed:2000,

anchors:['page1','page2','page3','page4'],

lockAnchors:true

});

</script>

</body>

</html>

2、配置项二

主要是配置页面滚动动画方式

①easing:

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

②css3:

是否使用CSS3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果。

③loopTop:

滚动到最顶部后是否连续滚动到底部，默认为false，连续滚动为跳转方式

④loopBottom:

滚动到最底部后是否连续滚动回顶部，默认为false，连续滚动为跳转方式

⑤loopHorizontal:

横向slide幻灯片是否循环滚动，默认是true，设置为false时，滚动到第一个slide时，左边箭头消失，同理滚动到最后一个slide时，右边的箭头消失。

⑥autoScrolling:

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

⑦scrollBar:

是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条出现，页面滚动时还是按页滚动，但是滚动条的默认行为也有效。

⑧paddingTop、paddingBottom:

设置每个section顶部和底部的padding，默认都是0,一般如果我们需要设置一个固定在顶部或者底部的菜单、导航、元素等，可以使用这两个配置项。

⑨fixedElements:

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

用法：fixedElements:'#header'

#header{

position:fixed;

top:0;

right:200px;

}

然后页面中需要有一个id是header的元素，并且这个元素的样式需要固定定位。

⑩keyboardScrolling:

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

⑪touchSensitivity:

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

⑫continuousVertical:

是否循环滚动，默认为false。如果设置为true，则页面灰循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时使用。（这个循环滚动是正常的像是下面那一屏就是最开始一屏一样，不是跳动的循环，而是把最开始那一屏排在后面，正常动画过渡过去）

⑬animateAnchor:

锚链接是否可以控制滚动动画，默认位 true，如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。（通过url#page2打开页面的时候，默认是有一个页面从下往上滑动出现的效果的，设置为false后，这个效果就没有了）

3、配置项三

①recordHistory:

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

②menu:

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

使用方法，在页面中添加菜单元素

<a href="#page1">1section</a>

</li>

<a href="#page2">2section</a>

</li>

<a href="#page3">3section</a>

</li>

<a href="#page4">4section</a>

</li>

</ul>

上面标红的值都是固定格式，以及对应的anchors。

在style中把这个元素固定到顶部

#fullpageMenu{position:fixed;top:0; z-index:999;font-size:30px;}

在fullpage({})的json里面增加配置：

anchors:['page1','page2','page3','page4'],

menu:'#fullpageMenu'

必须要有anchors的配置才行

③navigation:

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

④navigationPosition:

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

⑤navigationTooltips:

导航小圆点的tooltips设置，默认为[],注意按照顺序设置。

eg:就是在fullpage({

navigation:true,

navigationPosition:'right',

navigationTooltips:['page1','page2','page3','page4']

});

这样页面右边就有了导航小圆点，并且摸上去的时候会提示page1page2。

⑥showActiveTooltip:

是否显示当前页面的导航的tooltip信息，默认为false，就是上面配置的导航摸上去显示的信息，如果设置为true，就是屏幕到哪一屏，哪一个导航的tooltip就是出来，不需要摸上去。

⑦slidesNavigation:

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

⑧slidesNavPosition:

横向幻灯片导航的位置，默认为bottom，可以设置为top。

⑨scrollOverflow:

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

当一个section中内容超过一个屏幕高度时，会出现一个滚动条，但是不引入slimscroll插件这个滚动条只能看，不能用。

⑩sectionSelector:

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

我们<div class="section">第一屏</div>如果我们想修改这个类名，这个属性也要修改。

⑪slideSelector:

slide的选择器，默认为.slide

⑫⑬⑭⑮⑯⑰⑱⑲⑳

四、fullpage方法

1、moveSectionUp()向上滚动一页

eg:$.fn.fullpage.moveSectionDown();

2、moveSectionDown();向下滚动一页

eg:$.fn.fullpage.moveSectionDown();

3、moveTo(section,slide);滚动到第几个，第几个幻灯片，注意：页面是从1开始，而幻灯片是从0开始。

eg:$.fn.fullpage.moveTo(2,2);效果就是先动画过渡到第2个section再动画过渡到第3个slide

4、silentMoveTo(section slide):

滚动到第几页，和moveTo一样，但是没有动画效果。

5、moveSlideRight();

eg:$.fn.fullpage.moveSlideRight();前提是页面已经在slide界面了，不然不起作用

幻灯片向右滚动

6、moveSlideLeft();

幻灯片向左滚动。

7、

setAutoScrolling(boolean):动态设置autoScrolling

setLockAnchors(boolean):动态设置lockAnchors

setRecordHistory(boolean):动态设置recordHistory

setScrollingSpeed(millisecond):动态设置scrollSpeed

8、setAllowScrolling(boolean,[directions]);

添加或删除鼠标滚轮、滑动控制，第一个参数true位启用，false为禁用，后面的参数是方向，取值包括all，up，down，left，right，可以使用多个，逗号隔开。

eg:

$.fn.fullpage.setAllowScrolling(false,'down');

$.fn.fullpage.setAllowScrolling(true,'down');这样再设置一下就可以往下滚动了。

比如我们在做一个有奖问答页面，提问的问题在前面的页面有答案，当滚动到最后一页时，不希望用户载滚回前面查看答案，就可以使用这样的办法。

9、destory（type）

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

eg:

$.fn.fullpage.destroy();这样fullpage只留下样式了，其他都不起作用了

$.fn.fullpage.destroy('all');这样所有的样式都没有了

10、reBuild()

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

11、fullpage还支持延迟加载图片和视频（lazy loading）

图片：

视频：

<video>

</video>

主要写法是用data-src代替src属性，就可以使用延迟加载图片。

五、fullpage回调函数

1、afterLoad(anchorLink,index)

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

可以根据anchorLink 和index参数值的判断，触发相应的事件。

afterLoad:function(anchorLink,index){

console.log("afterLoad:anchorLink="+anchorLink+";index="+index);

}

每次进入一个页面就会触发一次这个函数，然后console输出一些东西

afterLoad:anchorLink=page1;index=1

2、onLeave(index,nextIndex,direction)

在离开一个section时，会触发一次此回调函数，接收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类似，

五、综合实例

applewatch产品四屏展示

实现步骤：

设计页面

准备文字和图片素材

按照设计实现基本的页面效果

实现动画

六、move.js

move(".section1 h1").set("margin-left","20%").end();