fullPage.js - - 学习笔记(版本：3.0.5)

参考网址：https://alvarotrigo.com/fullPage/

一、简介

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

　　　　1.支持鼠标滚动

　　　　2.多个回调函数

　　　　3.支持手机、平板触屏事件

　　　　4.支持css3动画

　　　　5.支持窗口缩放

　　　　6.窗口缩放时自动调整

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

　　二、获取方式：

　　    主页：https://alvarotrigo.com/fullPage/

　　

　　三、兼容性及大小、版本

　　　　1.支持所有主流浏览器，除IE6、IE7

　　　　2.仅7kb

　　　　3.最新版本是V2.6.7

　　四、如何使用：

　　　　1、引入相关文件

　　　　　　css文件：fukkPage.css

　　　　　　jquery文件：1.11以上版本即可

　　　　　　easing文件：easing.js，支持更多动画过渡效果的插件,可选的，非必须

　　　　　　fullPage文件：fullPage.js

　　　　2、页面的基本结构

<div id="fullpage">
   <div class="section"> //每一个session对应一个页面
       <div class="slide">slide1</div>//可以给每个页面加slide幻灯片
       <div class="slide">slide2</div>
       <div class="slide">slide3</div>
   </div>
   <div class="section"><h1>这是第二屏</h1></div>
   <div class="section">content</div>
</div>

3、要想激活fullpage效果，需要加入：

<script type="text/javascript">
    var myFullpage = new fullpage('#fullpage');
</script>

五、配置项

1.sectionColor:

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

    　　　　例如：

      　　　　$('#fullpage').fullpage({

            　　　　sectionColor: ['green','orange','gray','red'];

        　　　　});

　　　　2.controlArrows:

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

　　　　3.verticalCentered:

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

　　　　4.res