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

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

简介

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

主要功能

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

兼容性

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

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

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/

配置

1、选项

2、方法

3、回调函数

如何获取

官方网站  |  下载地址  |  fullPage.js GitHub 地址：https://github.com/alvarotrigo/fullPage.js