JS 流行库（二）：fullPage

JS 流行库（二）：fullPage

什么是 fullPage

fullPage.js 是一个基于 jQuery（JavaScript 框架） 的插件，可以很简单地制作一个全屏滚动网站

• 下载框架代码
• 查看示例程序
• 阅读框架文档
• 编写测试程序

引入框架

如下示例说明了使用 fullPage 框架时，应该引入哪些文件以及相应的引入顺序

<link rel="stylesheet" href="css/fullpage.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>

基本使用

1. HTML 结构
2. 创建一个 fullpage 对象

示例如下：

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script>
    new fullpage('#fullpage', {
        // options here
    });
</script>

常用属性

在创建 fullpage 对象时，可以使用属性实现页面效果，常用属性如下：

属性	功能
sectionsColor	设置各屏颜色
navigation	是否显示导航栏
navigationTooltips	设置导航栏提示信息
showActiveTooltip	是否默认显示导航栏提示信息
navigationPosition	设置导航栏位置
loopBottom	在最后一屏向下滚动时，是否移至第一屏
loopTop	在第一屏向上滚动时，是否移至最后一屏
continuousVertical	循环滚动

此处说明了常用属性的功能，并未说明用法，在必要时可以查看文档

示例如下：

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script>
    new fullpage('#fullpage', {
        sectionsColor: ["red", "orange", "yellow", "green"],
        navigation: true,
        navigationTooltips: ["First", "Second", "Third", "Forth"],
        showActiveTooltip: true,
        navigationPosition: "right",
        continuousVertical: true
    });
</script>

回调函数

在创建 fullpage 对象时，可以使用回调函数设置某一屏被激活时的动作，常用回调函数如下：

函数	功能
onLeave	在离开某一屏时
afterLoad	在滚动结束后，加载完成下一屏时

此处说明了常用回调函数的功能，并未说明用法，在必要时可以查看文档

示例如下：

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script>
    new fullpage('#fullpage', {
        sectionsColor: ["red", "orange", "yellow", "green"],
        navigation: true,
        navigationTooltips: ["First", "Second", "Third", "Forth"],
        showActiveTooltip: true,
        navigationPosition: "right",
        continuousVertical: true,
        onLeave: function (origin, destination, direction) {
            console.log(origin, destination, direction);
        },
        afterLoad: function (origin, destination, direction) {
            console.log(origin, destination, direction);
        }
    });
</script>

常用方法

在 fullPage 框架中，提供了一个 fullpage_api 全局对象，可以调用此对象提供的方法从而实现一些功能，常用方法如下：

方法	功能
moveSectionUp	移至上一屏
moveSectionDown	移至下一屏
moveTo	移至某一屏
getActiveSection	获取目前被激活的一屏

此处说明了常用方法的功能，并未说明用法，在必要时可以查看文档

菜单

在 fullPage 框架中可以使用自定义菜单，示例如下：

<ul id="myMenu" style="position: fixed; z-index: 1024">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">FirstPage</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">SecondPage</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">ThirdPage</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">ForthPage</a></li>
</ul>
<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script>
    new fullpage('#fullpage', {
        sectionsColor: ["red", "orange", "yellow", "green"],
        navigation: true,
        navigationTooltips: ["First", "Second", "Third", "Forth"],
        showActiveTooltip: true,
        navigationPosition: "right",
        continuousVertical: true,
        menu: "#myMenu",
        anchors: ["firstPage", "secondPage", "thirdPage", "fourthPage"]
    });
</script>

在使用自定义菜单，创建 fullpage 对象时，必须指定 menu 与 anchors 属性