关于fullPage.js使用方法

前言：如今不少的网站用那种大的图片作背景什么的看起来及其舒服，能够用鼠标滚动条，而后就能够一层一层的往下面翻阅板块，而且带有过分的动画，若是有导航能够点击导航到相应的板块。

1、下载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 的值对应后，菜单能够控制滚动
    });
});