fullPage——基于jQuery全屏滚动

看到977在群里发的苹果的一个全屏滚动网页，看起来非常高端，大气，上档次。拖了好几天了，今天下午试了一下。

---

介绍：

现在很多网页，看起来简洁大方很上档次，我们发现这些大多都是用几幅很大的图片或色块做背景，再添加一些简单的内容完成。

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

功能：

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

兼容性：

jQuery：1.7+

浏览器：IE8+，谷歌，火狐等基本都支持

使用方法：

1. 引入文件

通过CDN引入fullPage.js：

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>

2.HTML

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

每个section代表一个屏，默认显示第一屏，如果要指定显示屏幕，可以给其class="active".

也可以给section(每一屏)中添加水平方向上滚动切换的slide，如下：

<div id="dowebok">
    <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(){
    $('#dowebok').fullpage();
    //调用此方法进行初始化
});

这样基本实现了，GitHub地址

当然还有一些比如设置背景颜色的选项，定义锚链接之类的选项，向上滚动，向下滚动的方法，回调函数等等，都在我代码实现中有用。大家可以参考。或者也可以参考官网

参考文章