全屏滚动插件fullPage.js教程详解

【前言】

     经常看到一些全屏网站，看着就很高端大气上档次

     现在很多的网站用那种大的图片做背景什么的看起来效果很棒，可以用鼠标滚动条，然后就可以一层一层的往下面翻阅板块，并且带有过渡的动画，如果有导航可以点击导航到相应的板块。传统方法是用a标签的描点写的导航以及对应的相应板块，对于初学者一般也没什么高大上的方法，但是用a标签那只是一下子就到对应的板块去，完全没有过渡的样子，这样看起不太舒服。虽然用js可以弄但是有点麻烦，所以找到了fullPage.js方法。

   想实际操作的话，可以试着使用fullpage.js或 Scrollify 等基于jquery的插件，轻量又很方便

 

【兼容】

   jquery支持jquery 1.7+，浏览器支持IE8+及其他主流浏览器

 

【对比】

   对比Scrollify 和 fullPage.js：

   Scrollify 和 fullPage.js 一样，Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比，Scrollify 更加小巧，压缩后不足 4KB。但功能上不如 fullPage.js 强大，对移动设备的支持也不如 fullPage.js。不过对于一般的情况，Scrollify 是完全可以胜任的，它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动

 

【下载】

    fullPage.js是开源的JQuery插件库，其Github地址：https://github.com/alvarotrigo/fullPage.js

 

【功能】

  ①支持鼠标滚动

  ②支持前进后退和键盘控制

  ③多个回调函数

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

  ⑤支持 CSS3 动画

  ⑥支持窗口缩放

  ⑦窗口缩放时自动调整

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

 

【用法详解】

（1）文件引入

 ①引入css（注意：引入的css并非给元素设置样式的，元素的样式须要自己写）

    引入的css也就是个库，不是给我们设置css。简单来说就像bootstrap的库用class类这样使用

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

 ②引入fullPage.js之前，由于fullPage.js是开源的jQuery的所以需要先引入jQuery库

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

 ③引入脚本文件

<script src="js/jquery.fullPage.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

 

 （2）建立页面结构

<div id="main_body">
　　<div class="section">第一屏</div>
　　<div class="section">第二屏</div>
　　<div class="section">第三屏</div>
　　<div class="section">第四屏</div>
　　<div class="section">第五屏</div>
</div>

  分析：

    ①每一个section都是一个页面，包裹住所有的页面的容器不能是body，可以任意命名一个id包裹住所有的section；

   ②section是一个代码一屏，默认代码是从第一屏开始的。如果要定义从第几屏开始的话的话就加active，这样就是从那个屏开始了；

   ③样式设置：两种方法CSS设置或者JS动态设置

    1. 引入的css并非给元素设置样式的，元素的样式须要自己写，例如

<style type="text/css">
        body{color: #FFFFFF;}
        .section1{background-color: #BFDA00;}
        .section2{background-color: #2EBE21;}
        .section3{background-color: #2C3E50;}
        .section4{background-color: #FF9900;}
</style>

    2. JS动态设置（还有许多其他配置项，比如给多个页面填充不同的背景颜色）

    激活fullPage效果

$(document).ready(function(){
        $('#main_body').fullpage({
            sectionsColor: ['red', 'blue', 'yellow', 'green','purple']
        });   //激活fullpage的效果，可以检查页面看效果了
})

 

（3）子滚动屏

   如果要在某屏中再加入子滚动屏，需要借助slide类，改动上述第二个section例如以下：

<div class="section section2" style="text-align: center">
        <div class="slide">第二屏的第一屏</div>
        <div class="slide">第二屏的第二屏</div>
        <div class="slide">第二屏的第三屏</div>
        <div class="slide">第二屏的第四屏</div>
</div>

 

（4）背景屏，CSS设置即可

.section1 { background: url(image/1.jpg) no-repeat 100%;}
.section2 { background: url(image/2.jpg) no-repeat 100%;}

   

（5）循环演示

   ①返回跳跃性循环

loopTop:true,             /* 顶部循环滚动是跳往底部的页面*/
loopBottom:true,           /*  底部循环滚动，同样是跳往页面*/
loopHorizontal:false,      /*  幻灯片循环滚动*/

   ②无间隙循环

continuousVertical:true,

    区别：第一种在页面滑动到最后一页时，在进行滑动的时候，会跳回第一页，是跳跃的，而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意，两种循环方式不能兼而有之 （实际上两种循环方式都使用的话，会显示第一种）

 

 

（6）导航栏

    做全屏滚动网页，实现滚动效果后，首先想到的就是网页右边的导航栏，要实现这个导航栏，fullpage.js插件本身就自带配置项，只要会使用就可以实现效果了

    先介绍几个api：

   ①anchors：定义锚链接，默认值为[]，有了锚链接，就可以快速的打开定位到某一页面，也是我们实现导航栏的关键；

   ②lockAnchors：是否锁定锚链接，默认为false，如果设定为true，定义的锚链接，也就是anchors属性就没有效果了；

   ③menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单可以控制滚动，默认为false；

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

   ⑤navigationPostion：导航小圆点的位置，可以设置为left或right；

   ⑥navigationTooltips：导航小圆点的tooltips的提示，默认为[]，注意按照顺序设置

   【使用fullpage.js插件默认自带的导航栏：】

<script>
　　$(function(){
　　　　$('#main_body').fullpage({
　　　　　　anchors : ['section1','section2','section3']，//定义锚链接
　　　　　　navigation：true，//是否显示--true为圆点，false则不显示
            continuousVertical: true,  //循环演示
　　　　　　navigationPostion：right，//导航位置，left或right
　　　　　　navigationTooltips：['1的提示','2的提示','3的提示']  //设置导航提示
　　     });
　 });
</script>

  【自定义导航栏】

    倘若不想用fullpage.js默认的样式效果，还可以自定义样式

HTML：
<div id="gufeibai">
　　<div class="section">第一屏</div>
　　<div class="section">第二屏</div>
　　<div class="section">第三屏</div>
</div>
<ul id="menu">
    　　<li data-menuanchors='page1'><a href="#page1">1屏幕</a></li>
    　　<li data-menuanchors='page2'><a href="#page2">2屏幕</a></li>
    　　<li data-menuanchors='page3'><a href="#page3">3屏幕</a></li>
</ul>

CSS：
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; 
        list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; 
          text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}

$(function() {
            $("#ido").fullpage({
                    continuousVertical: true,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                    menu: '#menu',

             });
});

 

【自定义Section高度】

      网上很多用户说无法自定义底部Footer的高度，我也查阅了很多资料，都没有发现方法，但是无意间看到一个Fullpage的示例，实现自定义底部高度的方法，而且是不算在滑动的Section里面，在需要自定义高度的DIV里面，只需要给Section添加.fp-auto-height类就可以实现自定义高度。

 

 

【拓展】

（1）随意的改变其中一屏的高度

       如果设计别处心裁，最后一屏幕内容装不下，再添加一屏又多余，就是怎么能随意的改变其中一屏的高度，其实很简单，只需要在fullpage方法中添加一个参数：scrollOverflow: true即可。当然不要忘记引入一个 

<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js">
</script> 

      这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了

（2）内容溢出scrollOverflow:true设置失效问题

      可能原因：（1）js版本不同导致的（2）scrollOverflow单词拼写错误

（3）自定义的导航菜单active添加不上，激活状态失效

      原因：（1）单词拼写错误data-menuanchor写成了data-menuanchors，多了个s

（4）js版本不一样的问题

      当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候，我试了几个jq版本也没有出现问题，所以，版本要相同指的是jquery.fullpage.css ，scrolloverflow.min.js， jquery.fullpage.js这几个js相同

（5）最后附上部分API

//配置背景颜色
            sectionsColor:['red','#f04','#9b0','#d3f'],  

            //配置幻灯片切换是否显示箭头，默认true
            controlArrows:false, 

            //配置每页内容页面是否垂直居中，默认false
            verticalCentered:true,

            //配置文字是否随着窗口变化而变化，默认false
            resize:true,

            //配置页面滚动速度,默认700
            scrollingSpeed:1000,

            //配置锚链接，不应该和autoScrolling，scrollBar一起使用
            anchors:['page1','page2','page3','page4'],

            //配置锚点切换时候是否有过度动画，默认true
            animateAnchor:false,

            //锁定配置的锚链接是否显示，默认false
            lokAnchors:true,

            //配置动画由css3还是jquery来执行，默认true
            css3:true,

            //配置滚动到顶部之后是否从底部循环滚动，默认false
            loopTop:true,

            //相反从底部循环滚动，默认false
            loopBottom:true,

            //设置页面是否循环滚动与loopTop，loopBottom不兼容,默认是false
            continuousVertical:true,

            //幻灯片是否循环滚动，默认true
            loopHorizontal:false,

            //配置是否按照插件的方式来进行滚动，默认true,和锚点不应该一起使用，
            一般不设置或者保持默认
            autoScrolling:true,

            //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用，一般不设
            置或者保持默认
            scrollBar:false,

            //配置页面上下间距，默认0，如果需要设置固定顶部和顶部菜单导航配合使用
            // paddingTop：'300px',
            paddingBottom:0,

            //配置页面是否有固定的DOM
            fixedElements:'#header',

            //配置是否支持键盘方向键控制页面切换，默认true
            keyboardScrolling:true,

            //配置是否激活浏览器前进后退功能，如果页面设置了不按照插件的方式来滚动
              该配置也失效，默认true
            recordHistory:true,

            //配置菜单
            menu:'#fullpageMenu',

            //配置导航,位置，提示,显示当前位置
            navigation:true,
            navigation:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            showActiveTooltip:true,

            //配置幻灯片是否显示导航,和位置
            slidesNavigation:true,
            slidesNavPosition:'bottom',

            //配置内容超过容器是否显示滚动条，模式true,
            scrollOverflow:true,

            //修改section和幻灯片默认CLASS
            sctionSelector:
            slideSelector:

 

 

 

 

 

 

 

.