随着扁平化风格的日益流行，越来越多的网页越来越简单但又看上去高大上，比如小米、魅族、苹果等等知名站点的新品页面，以及360、百度等网站的专题页面越来越采用分屏滚动的风格。

当然实现这种风格的方法有多种多样的，千奇百怪。但在这里就不得不提到一款较轻量级的基于jQuery的JS类库，那就是fullPage.js，该库的开发版大小约为90kb，为压缩版JQ的大小，而压缩版为20KB左右。包括魅族、苹果等知名网站也采用过该库，也可以说明它确实还行。那么下面整理一些相关的资料，分享出来供大家备用。

github地址：https://github.com/alvarotrigo/fullPage.js

演示地址：http://alvarotrigo.com/fullPage/（国外的你懂的，建议大家看下面国内的吧）

魅蓝note2专题页面：http://www.meizu.com/products/meilannote2/feature.html

其他CDN资源：http://www.bootcdn.cn/fullPage.js/

特征与功能

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
• 可基于jQuery 1.7+版本
• 兼容Chrome、火狐、Opera、safari、以及IE8+

使用方法

1、引入库文件

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

<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>

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

2、HTML基本结构

<div id="page">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
</div>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

<div class="section active">第三屏</div>

同时，可以在 section 内加入 slide，如：

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

3、JS调用

$(function(){
    $('#page').fullpage();
});

插件参数及方法等

1、选项

2、方法

3、回调函数

如果你想使用fullpage快速应用而又不想在项目中使用JQ，不妨访问下这篇文章——《不依赖jQuery的全屏类库—zepto.fullpage和fullpage》