jQuery全屏滚动插件FullPage.js

川长思鸟来 2022-09-22 03:46 305阅读 0赞

# jQuery全屏滚动插件FullPage.js中文帮助文档API #

**文章目录**

*  [简介][Link 1]
 *  [主要功能][Link 2]
 *  [兼容性][Link 3]
 *  [使用方法][Link 4]
 *  [1、引入文件][1]
 *  [2、HTML][2_HTML]
 *  [3、JavaScript][3_JavaScript]
 *  [配置][Link 5]
 *  [1、选项][1 1]
 *  [2、方法][2]
 *  [3、回调函数][3]
 *  [如何获取][Link 6]

七牛最近改版了网站，弄成全屏滚动的特效，真的很炫，于是查看其源代码，发现了一个fullPage.js插件，于是百度了一下，还就是这个插件的作用，其实有很多网站都做了全屏滚动的特效，效果也很好看，今天就给大家说说fullPage.js的使用方法和设置。

[![jQuery全屏滚动插件FullPage.js中文帮助文档API][jQuery_FullPage.js_API]][jQuery_FullPage.js_API]

## 简介 ##

fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站。

[![fullpage开源中文文档][fullpage]][fullpage_fullpage]

## 主要功能 ##

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

## 兼容性 ##

fullPage.js 支持 IE8+ 及其他现代浏览器。

## 使用方法 ##

### 1、引入文件 ###

### 2、HTML ###

<div id="fullpage">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
            <div class="slide">第三屏的第四屏</div>
        </div>
        <div class="section">第四屏</div>
    </div>

### 3、JavaScript ###

$(function(){
        $('#fullpage').fullpage({
            'verticalCentered': false,
            'css3': true,
            'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
            anchors: ['page1', 'page2', 'page3', 'page4'],
            'navigation': true,
            'navigationPosition': 'right',
            'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
        })
    })

经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。

点击这里查看上面代码的示例：[http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/][http_www.uedsc.com_wp-content_uploads_2015_02_fullpage-demo]

## 配置 ##

### 1、选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>verticalCentered</td> 
   <td>字符串</td> 
   <td>true</td> 
   <td>内容是否垂直居中</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>字体是否随着窗口缩放而缩放</td> 
  </tr> 
  <tr> 
   <td>slidesColor</td> 
   <td>函数</td> 
   <td>无</td> 
   <td>设置背景颜色</td> 
  </tr> 
  <tr> 
   <td>anchors</td> 
   <td>数组</td> 
   <td>无</td> 
   <td>定义锚链接</td> 
  </tr> 
  <tr> 
   <td>scrollingSpeed</td> 
   <td>整数</td> 
   <td>700</td> 
   <td>滚动速度，单位为毫秒</td> 
  </tr> 
  <tr> 
   <td>easing</td> 
   <td>字符串</td> 
   <td>easeInQuart</td> 
   <td>滚动动画方式</td> 
  </tr> 
  <tr> 
   <td>menu</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动</td> 
  </tr> 
  <tr> 
   <td>navigation</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>是否显示项目导航</td> 
  </tr> 
  <tr> 
   <td>navigationPosition</td> 
   <td>字符串</td> 
   <td>right</td> 
   <td>项目导航的位置，可选 left 或 right</td> 
  </tr> 
  <tr> 
   <td>navigationColor</td> 
   <td>字符串</td> 
   <td>#000</td> 
   <td>项目导航的颜色</td> 
  </tr> 
  <tr> 
   <td>navigationTooltips</td> 
   <td>数组</td> 
   <td>空</td> 
   <td>项目导航的 tip</td> 
  </tr> 
  <tr> 
   <td>slidesNavigation</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>是否显示左右滑块的项目导航</td> 
  </tr> 
  <tr> 
   <td>slidesNavPosition</td> 
   <td>字符串</td> 
   <td>bottom</td> 
   <td>左右滑块的项目导航的位置，可选 top 或 bottom</td> 
  </tr> 
  <tr> 
   <td>controlArrowColor</td> 
   <td>字符串</td> 
   <td>#fff</td> 
   <td>左右滑块的箭头的背景颜色</td> 
  </tr> 
  <tr> 
   <td>loopBottom</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>滚动到最底部后是否滚回顶部</td> 
  </tr> 
  <tr> 
   <td>loopTop</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>滚动到最顶部后是否滚底部</td> 
  </tr> 
  <tr> 
   <td>loopHorizontal</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>左右滑块是否循环滑动</td> 
  </tr> 
  <tr> 
   <td>autoScrolling</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条</td> 
  </tr> 
  <tr> 
   <td>scrollOverflow</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>内容超过满屏后是否显示滚动条</td> 
  </tr> 
  <tr> 
   <td>css3</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>是否使用 CSS3 transforms 滚动</td> 
  </tr> 
  <tr> 
   <td>paddingTop</td> 
   <td>字符串</td> 
   <td>0</td> 
   <td>与顶部的距离</td> 
  </tr> 
  <tr> 
   <td>paddingBottom</td> 
   <td>字符串</td> 
   <td>0</td> 
   <td>与底部距离</td> 
  </tr> 
  <tr> 
   <td>fixedElements</td> 
   <td>字符串</td> 
   <td>无</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>normalScrollElements</td> 
   <td>&nbsp;</td> 
   <td>无</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>keyboardScrolling</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>是否使用键盘方向键导航</td> 
  </tr> 
  <tr> 
   <td>touchSensitivity</td> 
   <td>整数</td> 
   <td>5</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>continuousVertical</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>是否循环滚动，与 loopTop 及 loopBottom 不兼容</td> 
  </tr> 
  <tr> 
   <td>animateAnchor</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>normalScrollElementTouchThreshold</td> 
   <td>整数</td> 
   <td>5</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 2、方法 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>moveSectionUp()</td> 
   <td>向上滚动</td> 
  </tr> 
  <tr> 
   <td>moveSectionDown()</td> 
   <td>向下滚动</td> 
  </tr> 
  <tr> 
   <td>moveTo(section, slide)</td> 
   <td>滚动到</td> 
  </tr> 
  <tr> 
   <td>moveSlideRight()</td> 
   <td>slide 向右滚动</td> 
  </tr> 
  <tr> 
   <td>moveSlideLeft()</td> 
   <td>slide 向左滚动</td> 
  </tr> 
  <tr> 
   <td>setAutoScrolling()</td> 
   <td>设置页面滚动方式，设置为 true 时自动滚动</td> 
  </tr> 
  <tr> 
   <td>setAllowScrolling()</td> 
   <td>添加或删除鼠标滚轮/触控板控制</td> 
  </tr> 
  <tr> 
   <td>setKeyboardScrolling()</td> 
   <td>添加或删除键盘方向键控制</td> 
  </tr> 
  <tr> 
   <td>setScrollingSpeed()</td> 
   <td>定义以毫秒为单位的滚动速度</td> 
  </tr> 
 </tbody> 
</table>

### 3、回调函数 ###

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

## 如何获取 ##

[官方网站][Link 7]  |  [ 下载地址][Link 8]  |  fullPage.js GitHub 地址：[https://github.com/alvarotrigo/fullPage.js][https_github.com_alvarotrigo_fullPage.js]

[Link 1]: http://www.uedsc.com/fullpage.html#title-0
[Link 2]: http://www.uedsc.com/fullpage.html#title-1
[Link 3]: http://www.uedsc.com/fullpage.html#title-2
[Link 4]: http://www.uedsc.com/fullpage.html#title-3
[1]: http://www.uedsc.com/fullpage.html#title-4
[2_HTML]: http://www.uedsc.com/fullpage.html#title-5
[3_JavaScript]: http://www.uedsc.com/fullpage.html#title-6
[Link 5]: http://www.uedsc.com/fullpage.html#title-7
[1 1]: http://www.uedsc.com/fullpage.html#title-8
[2]: http://www.uedsc.com/fullpage.html#title-9
[3]: http://www.uedsc.com/fullpage.html#title-10
[Link 6]: http://www.uedsc.com/fullpage.html#title-11
[jQuery_FullPage.js_API]: http://www.uedsc.com/wp-content/uploads/2014/06/77.png
[fullpage]: http://www.uedsc.com/wp-content/uploads/2014/06/fullpage-doc.jpg
[fullpage_fullpage]: http://www.uedsc.com/open/fullpage
[http_www.uedsc.com_wp-content_uploads_2015_02_fullpage-demo]: http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/
[Link 7]: http://alvarotrigo.com/fullPage/
[Link 8]: https://github.com/alvarotrigo/fullpage.js/archive/master.zip
[https_github.com_alvarotrigo_fullPage.js]: https://github.com/alvarotrigo/fullPage.js