关于fullPage.js使用方法

前言：先说说废话哈，现在很多的网站用那种大的图片做背景什么的看起来及其舒服，可以用鼠标滚动条，然后就可以一层一层的往下面翻阅板块，并且带有过度的动画，如果有导航可以点击导航到相应的板块，一开始我是用a标签的描点写的导航以及对应的相应板块，对于初学着的我也没想到什么高大上的方法了，但是用a标签那只是一下子就到对应的板块去了完全没有过度的样子，这样自己看起都是不太舒服了。虽然用js可以弄但是有点麻烦啊，所以我找到了fullPage.js方法。接下来我们说说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>

/*加导航的可点击*/
<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 的值对应后，菜单可以控制滚动
    });
});

这里就不展示效果了，可以复制代码去看看效果！
配置图：

如果哪里不对希望指出来哈。
原文地址：https://github.com/dwqs/blog

关于fullPage.js使用方法

猜你喜欢