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>
基本使用
- HTML 结构
- 创建一个 fullpage 对象
示例如下：
<div id="fullpage"><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv>
div>
<script>new fullpage('#fullpage', {// options here});
script>
常用属性
在创建 fullpage 对象时，可以使用属性实现页面效果，常用属性如下：
| 属性 | 功能 |
|---|---|
| sectionsColor | 设置各屏颜色 |
| navigation | 是否显示导航栏 |
| navigationTooltips | 设置导航栏提示信息 |
| showActiveTooltip | 是否默认显示导航栏提示信息 |
| navigationPosition | 设置导航栏位置 |
| loopBottom | 在最后一屏向下滚动时，是否移至第一屏 |
| loopTop | 在第一屏向上滚动时，是否移至最后一屏 |
| continuousVertical | 循环滚动 |
此处说明了常用属性的功能，并未说明用法，在必要时可以查看文档
示例如下：
<div id="fullpage"><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv>
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 sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv>
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">FirstPagea>li><li data-menuanchor="secondPage"><a href="#secondPage">SecondPagea>li><li data-menuanchor="thirdPage"><a href="#thirdPage">ThirdPagea>li><li data-menuanchor="fourthPage"><a href="#fourthPage">ForthPagea>li>
ul>
<div id="fullpage"><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv><div class="section">Some sectiondiv>
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 属性
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！