jQuery 全屏滾動插件 fullPage.js

以前介紹過 jQuery 全屏滾動插件 fullPage.js，不少人都問如何製做相似小米四、小米手環的頁面，fullPage.js 主頁也沒有相關的介紹，因此一直沒有作出一個這個這樣的例子。其實相似小米四、小米手環這樣的頁面是他們的工程師本身開發的，或者是藉助jquery.mousewheel.js 等插件實現的，還有的這是經過修改 fullPage.js 實現的，好比魅藍 note2 就是這樣作的，因此理論上咱們能夠直接拿過來用。

最近在查看最新的 fullPage.js 源代碼時（2.7.1），忽然發現 「AUTO_HEIGHT」 幾個字母，心想：這是自動高度嗎？繼續往下讀後發現，原來 fullPage.js 真的能夠實現自動高度，不知爲什麼做者沒在主頁上提到。不過在測試的時候發現了一個 bug：當第一個 section 是自動高度時，往下滾動後，就不能再滾回第一個了。咱們來修改一下，找到 1215 行的代碼，以下：

var dtop = element.hasClass(AUTO_HEIGHT) ? (dest.top - windowsHeight + element.height()) : dest.top;

修改爲：

var dtop=element.hasClass(AUTO_HEIGHT)?(dest.top==0?0:dest.top-windowsHeight+element.height()):dest.top;

修改好後，咱們就開始製做魅藍 note2 頁面。

瀏覽器兼容

IE7+ ✔	Edge ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

製做方法

一、引入文件

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

二、HTML

<div class="ml-nav">
    <div class="center-wrap clearfix">
        <h2 class="ml-logo">魅藍note2</h2>
        <p class="ml-link">
            <a href="javascript:">概述</a>
            <a href="javascript:">參數</a>
            <a href="javascript:">圖庫</a>
            <a href="javascript:">機型比較</a>
            <a href="javascript:">意外險</a>
        </p>
        <a class="buy-now" href="javascript:">當即購買</a>
    </div>
</div>

<div id="dowebok">
    <div class="section header fp-auto-height">
        <div class="center-wrap clearfix">
            <h1 class="meizu-logo"><a href="javascript:">MEIZU</a></h1>
            <ul class="nav">
                <li><a href="javascript:">在線商店</a></li>
                <li><a href="javascript:">產品</a></li>
                <li><a href="javascript:">專賣店</a></li>
                <li><a href="javascript:">Flyme</a></li>
                <li><a href="javascript:">服務</a></li>
                <li><a href="javascript:">社區</a></li>
            </ul>
            <div class="login">
                <a href="javascript:">註冊</a>|<a href="javascript:">登錄</a>
            </div>
        </div>
    </div>

    <div class="section banner active">
        <div class="center-wrap">
            <div class="desc banner-desc">
                <h1>青年良品</h1>
                <p>追求極致，輕易不說完美&mdash;&mdash;半年時間內，咱們便更新了魅藍 note2。它從各個方面都更進一步；
不管是 R 角弧線、仍是更佳的相機算法、甚或是全新的 mBack 鍵……如此多的改進，只爲給你一臺更加完美的「青年良品」。</p>
            </div>
        </div>
    </div>

    ...

    <div class="section footer fp-auto-height"></div>
</div>

最上面的 div.ml-nav 是二級導航，不用管它。div#dowebok 內纔是滾屏內容，第一個 section 是頭部，最後一個是底部，咱們但願它們高度自動，因此加 fp-auto-height 的 class，另外魅藍 note2 默認是顯示「第二屏」，因此咱們給第二個 section 加上 active 的 class。

三、CSS

#fp-nav ul li:first-child, #fp-nav ul li:last-child { display: none;}

@media screen and (min-width:1920px) {
    .banner { background: url(../images/bg1.jpg) center 0 no-repeat;}
    .thin { background: url(../images/bg2.jpg) center 0 no-repeat;}
    .cnc { background: url(../images/bg3.jpg) center 0 no-repeat;}
    .screen { background: url(../images/bg4.jpg) center 0 no-repeat;}
    .cpu { background: url(../images/bg5.jpg) center 0 no-repeat;}
    .camera { background: url(../images/bg7.jpg) center 0 no-repeat;}
    .flyme { background: url(../images/bg9.jpg) center 0 no-repeat;}
    ...
}
@media screen and (max-width:1440px) {
    .cnc { background: url(../images/bg3-xs.jpg) center 0 no-repeat;}
}

CSS 沒有什麼特別的，多了一些 CSS3 媒體查詢。另外，魅藍 note2 隱藏了右邊圓點導航的第一個和最後一個，即頭部和底部的導航，咱們也照作吧，如上面第一行 CSS 代碼。

四、JavaScript

$(function(){
    var $mlNav = $('.ml-nav');
    $('#dowebok').fullpage({
        verticalCentered: !1,
        navigation: !0,
        onLeave: function(index, nextIndex, direction){
            if(index == 2 && direction == 'up'){
                $mlNav.animate({
                    top: 80
                }, 680);
            } else if(index == 1 && direction == 'down') {
                $mlNav.animate({
                    top: 0
                }, 400);
            } else if(index == 3 && direction == 'up') {
                $mlNav.animate({
                    top: 0
                }, 500);
            } else {
                $mlNav.animate({
                    top: -66
                }, 400);
            }
        }
    });
});

JavaScript 也沒什麼特別的，只是加了 onLeave 回掉函數用於處理二級導航的顯示和隱藏。

到這裏就作完了，效果和魅藍 note2 官方頁面並非如出一轍，這裏主要是講方法。