jQuery插件jquery.fullPage.js

简介

如今我们经常能看到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或者色块做背景，再添加一些简单的内容，

显得格外的高端大气上档次，比如 iPone 5C 的介绍页面、QQ浏览器的官方网站、百度史记2013效果。如果你也希望

你的网站能设计成全屏的，显得更上档次，我们可以试试fullPage.js。

fullPage.js是一个基于jQuery的插件，他能够很方便、很轻松的制作出全屏网站，主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持CSS3动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等等。

兼容性

jQuery兼容：兼容jQuery 1.7+。

浏览器兼容：IE8+、Chrome、Firefox、Opera、Safari。

使用方法：

1、引入文件

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

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

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

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

2、HTML

         <div >
               <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 代表一屏，默认显示第一屏，如果要指定加载页面时显示的"屏幕"，可在对应的 section 加上

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

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

<div >
        <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(){
             $('#SkyTeam_LBM').fullpage();
       });

配置

1、选项

2、方法

3、回调函数