fullpage.js是一個基於jQuery的外掛，能幫助我們很容易的實現酷炫的全屏網站的製作。一般全屏網站用幾個很大的圖片或色塊做背景，在新增一些簡單的內容，顯得格外的高階大氣上檔次。fullpage.js支援移動裝置主要的功能有:

支援滑鼠滾動
支援前進後退和鍵盤控制
多個回撥函式
支援手機、平板觸控事件
支援 CSS3 動畫
支援視窗縮放
視窗縮放時自動調整
可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等等

在所有主流瀏覽器上都相容，支援IE 8+

在使用上面我們首先要引入相應的檔案:

<link rel="stylesheet" href="jquery.fullPage.css"
 
>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<!-- jquery.easings.min.js 用於 easing 引數，如果不需要設定easing引數，可不引入該檔案 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 設定為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 -->
 

<script src="js/jquery.slimscroll.min.js"></script>

下面用一個例子說明fullpage.js的使用:

   <link rel="stylesheet" href="jquery.fullPage.css">
    <style>
        h3,p{
            text-align: center;
            font:"Microsoft Yahei";
        }
        .section1{
            background
 
: url('images/1.jpg') 50%;
        }
        .section2{
            background: #4BBFC3;
        }
        .section2 p{
            position: relative;
            left: -120%;
        }
        .section3{
            background: #7BAABE;
        }
        .section3 p{
            position: relative;
            bottom: -120%;
        }
        .section4{
            background: #f90;
        }
        .section4 p{
            display: none;
        }
        #menu{
            margin: 0;
            padding:0;
            position: fixed;
            top:10px;
            left:20px;
            list-style-type: none;
            z-index: 100;
        }
        #menu li{
            float:left;
            margin:0 10px 0 0;
            font-size: 16px;
        }
        #menu a{
            color:#333;
            background: #fff;
            padding:6px 8px;
            text-decoration: none;
        }
        #menu .active a{
            color:#fff;
            background: #333;
        }
    </style>

<!--   href值要與anchors值保持一致-->
    <ul id="menu">
        <li data-menuanchor="about" class="active"><a href="#about">主頁</a></li>
        <li data-menuanchor="work"><a href="#work">作品</a></li>
        <li data-menuanchor="photo"><a href="#photo">相簿</a></li>
        <li data-menuanchor="article"><a href="#article">日誌</a></li>
    </ul>

    <div id="loading">
        <div class="section section1">
            <h3>主頁</h3>
        </div>
        <div class="section section2">
            <h3>作品</h3>
            <p>這是我的作品內容</p>
        </div>
        <div class="section section3">
            <h3>相簿</h3>
            <p>這是相簿頁面</p>
        </div>
        <div class="section section4">
            <h3>日誌</h3>
            <p>這是日誌頁面</p>
        </div>
    </div>

    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script>
    $(function(){
        $('#loading').fullpage({
         //   定義錨鏈接，與接下來的跳轉頁面有關
            anchors:['about','work','photo','article'],
            menu:'#menu',
        //    顯示專案導航欄
            navigation:true,
            navigationPosition:'right',
            navigationTooltips:['home','work','photo','article'],
        //    迴圈滾動
            continuousVertical:true,

// 滾動到某一屏後的回撥函式，接收 anchorLink 和 index 兩個引數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
            afterLoad:function(anchorLink,index){
                    if(index == 2){
                        $('.section2').find("p").delay(500).animate({
                            left:'0'
                        },1200,'easeOutExpo');
                    }
                    if(index == 3){
                        $('.section3').find('p').delay(500).animate({
                            bottom:'0'
                        },1200,'easeOutExpo');
                    }
                    if(index == 4){
                        $('.section4').find('p').fadeIn(2000);
                    }
                },
//滾動前的回撥函式，接收 index、nextIndex 和 direction 3個引數：

//index 是離開的“頁面”的序號，從1開始計算；

//nextIndex 是滾動到的“頁面”的序號，從1開始計算；

//direction 判斷往上滾動還是往下滾動，值是 up 或 down。
                onLeave:function(index,direction){
                    if(index == 2){
                        $('.section2').find('p').delay(500).animate({
                            left:'-120%'
                        },500,'easeOutExpo');
                    }
                    if(index == 3){
                        $('.section3').find('p').delay(500).animate({
                            bottom:'-120%'
                        },500,'easeOutExpo');
                    }
                    if(index == 4){
                        $('.section4').find('p').fadeOut(2000);
                    }
                }
        });
    });
    </script>

這是實現的效果: