fullPage插件

1. 简介

1.1 关于 fullPage.js

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次

1.2 兼容性

fullPage.js 兼容所有的现代浏览器，以及一些旧版浏览器，如 Internet Explorer 9都可以兼容。可兼容支持 CSS3 的浏览器与非支持 CSS3 的浏览器，适用于旧版浏览器。同时，手机、平板电脑和触屏电脑还提供触屏支持

1.3 fullPage.js 主要功能

支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

1.4 参考文档

官网： https://alvarotrigo.com/fullPage/zh/

http://fullpage.81hu.com/

2. 使用

2.1 引入插件文件

这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
<script src="/fullpage/jquery.min.js"></script>
<script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

如果你需要自定义页面滚动的效果，你需要引入jquery.easings.min.js文件

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

对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果

<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>

2.2 编写HTML代码

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

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

设置默认第一屏：如果你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕

 <!--给该屏添加一个 active 类即可-->
<div class="section active">Some section</div>

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

<div class="section">
  <div class="slide"> Slide 1</div>
  <div class="slide"> Slide 2</div>
  <div class="slide"> Slide 3</div>
  <div class="slide"> Slide 4</div>
</div>

2.3 初始化Fullpage

使用jQuery的文档加载完毕以后执行函数，初始化Fullpage插件

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

所有选项的配置如下：

$(document).ready(function() {
  $('#fullpage').fullpage({
    //Navigation
    menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。
    anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]
    lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变
    navigation: false,//是否显示导航，默认为false
    navigationPosition: 'right',//导航小圆点的位置
    navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示
    showActiveTooltip: false,//是否显示当前页面的tooltip信息
    slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false
    slidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom

    //Scrolling
    css3: true,//是否使用CSS3 transforms来实现滚动效果，默认为true
    scrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700
    autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
    fitToSection: true,//设置是否自适应整个窗口的空间，默认值：true
    scrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
    easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件
    easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件
    loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false
    loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false
    loopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为true
    continuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
    normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图
    scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
    touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: true,//是否可以使用键盘方向键导航，默认为true
    animateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
    recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭

    //Design
    controlArrows: true,//定义是否通过箭头来控制slide,默认true
    verticalCentered: true,//定义每一页的内容是否垂直居中，默认true
    resize : false,//字体是否随窗口缩放而缩放，默认false
    sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性
    paddingTop: '3em',// 设置每一个section顶部的padding,默认为0
    paddingBottom: '10px', // 设置每一个section底部的padding,默认为0
    fixedElements: '#header, .footer', // 固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
    responsiveWidth: 0,
    responsiveHeight: 0,

    //Custom selectors
    sectionSelector: '.section',//section选择器。默认为.section
    slideSelector: '.slide',//slide选择器，默认为.slide

    //events
    onLeave: function(index, nextIndex, direction){},
   afterLoad: function(anchorLink, index){},
   afterRender: function(){},
   afterResize: function(){},
   afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
   onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});