關於fullPage.js使用方法

前言：現在很多的網站用那種大的圖片做背景什么的看起來及其舒服，可以用鼠標滾動條，然后就可以一層一層的往下面翻閱板塊，並且帶有過度的動畫，如果有導航可以點擊導航到相應的板塊。

一、下載fullPage.js 
1. https://github.com/alvarotrigo/fullPage.js

2.先引入fullPage.js，由於fullPage.js是開源的jQuery的所以也需要引入jQuery

引入的css
<link rel="stylesheet" href="jquery.fullPage.css" />
fullPage.js依賴jQuery庫
<script src="../js/jquery-1.11.1.js"></script>
<script src="jquery.fullPage.min.js"></script>

3.引入的css他也就是個庫不是給我們設置css,簡單來說就像bootstrap的庫 用class類這樣使用。 
4.html代碼：section是一個代碼一屏，默認代碼是從第一屏開始的如果要定義從第幾屏開始的話的話就加active，這樣就是從第二屏開始了。

css:

<style>
            #menu {
                margin: 0;
                padding: 0;
                position: fixed;
                left: 10px;
                top: 10px;
                list-style-type: none;
                z-index: 70;
            }

            #menu li {
                float: left;
                margin: 0 10px 0 0;
                font-size: 14px;
            }

            #menu a {
                float: left;
                padding: 10px 20px;
                background-color: #fff;
                color: #333;
                text-decoration: none;
            }

            #menu .active a {
                color: #fff;
                background-color: #333;
            }

            .section {
                text-align: center;
                font: 50px "Microsoft Yahei";
                color: #fff;
                background: red;
            }
    </style>

html:

/*加導航的可點擊*/
<ul id="menu">
    <li data-menuanchor="page1" class="active">
        <a href="#page1">第一屏</a>
    </li>
    <li data-menuanchor="page2">
        <a href="#page2">第二屏</a>
    </li>
    <li data-menuanchor="page3">
        <a href="#page3">第三屏</a>
    </li>
    <li data-menuanchor="page4">
        <a href="#page4">第四屏</a>
    </li>
</ul>
/*鼠標滾動換/*
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>fullPage.js — 綁定菜單演示</p>
    </div>
    <div class="section active">
        <h3>第二屏</h3>
        <p>請查看左上角，點擊可以控制</p>
    </div>
    <div class="section">
        <h3>第三屏</h3>
        <p>綁定的菜單沒有默認的樣式，你需要自行編寫</p>
    </div>
    <div class="section">
        <h3>第四屏</h3>
        <p>這是最后一屏</p>
    </div>
</div>

5.js

$(function(){
    $('#dowebok').fullpage({
    //sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    //設置顏色參數
    anchors: ['page1', 'page2', 'page3', 'page4'],
    //定義錨鏈接
    menu: '#menu'
    //綁定菜單，設定的相關屬性與 anchors 的值對應后，菜單可以控制滾動
    });
});