FullPage 概述


  • FullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏滚动网站


JQuery 概述


  • 用 JS 封装的一个框架


那么问题来了不会 jQuery 能够学习使用 FullPage 吗？编程开发属于一门 ​​"做中学"​​ 的学科，无论是什么编程语言，我们都不可能等到所有内容都学会才开始编写程序，FullPage 虽然是一个基于 jQuery 的插件，但是无论是 jQuery 还是 FullPage 都是用 JS 编写的，所以会 JS 即可

关于学习插件或者框架


  • 在企业开发中因为开发时间、企业成本、惰性因素等
  • 所以并不是所有的功能都需要我们自己实现
  • 大部分情况下一些常用的功能都有现成的插件或者框架
  • 我们只需要找到合适的插件或者框架，快速学习套用即可 ​​(俗称搬砖)​​


插件或者框架的来源

  1. 个人或团队自行封装
  2. 百度、谷歌、GitHub
  3. 行业交流、技术峰会等

学习和使用框架

  1. 下载框架
  2. 查看框架示例程序
  3. 阅读框架文档
  4. 编写 DEMO

经过了如上的一大堆的概述过后，接下来，来看一个 FullPage 的基本使用吧，首先下载 FullPage 框架，下载地址：​​https://github.com/alvarotrigo/fullPage.js​​ 本文当中没有使用 node.js 的方式来进行使用，后期会出，就以文件引入的方式来使用，如下是我去官方地址截的图，基础的使用需要如下框中的内容

fullPage基本使用_html

然后在按照文档进行初始化即可

fullPage基本使用_html_02

最终代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullpage的基本使用</title>
    <link rel="stylesheet" href="css/fullpage.css">
    <!--注意点: 由于fullPage.js 是一个基于 jQuery 的插件, 所以需要先引入jQuery.js-->
    <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>
</head>
<body>
<div id="fullpage">
    <div class="section">Some section11111111</div>
    <div class="section">Some section22222222</div>
    <div class="section">Some section33333333</div>
    <div class="section">Some section44444444</div>
</div>
<script>
    new fullpage('#fullpage', {});
</script>
</body>
</html>

编写好了如上代码然后在浏览器当中进行打开，效果如下

fullPage基本使用_封装_03