fullpage插件的使用0802

fullpage插件的使用

1.基本使用

1.1

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

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

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

  4.插件或者框架来源
  5.1个人或团队自行封装
  5.2百度、谷歌、GitHub
  5.3行业交流、技术峰会等

1.2 引入方法

• <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>
  

2.常用属性

• new fullpage('#fullpage', {
         // options here
         // 设置每一屏的背景颜色
         sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
         // 显示指示器
         navigation: true,
         // 设置指示器的提示信息
         navigationTooltips:['11','222','3333','444'],
         // 让指示器的提示信息默认就显示
         showActiveTooltip: true,
         // 设置指示器显示的位置(可以是左边, 也可以是右边)
         // navigationPosition: 'left',
         // 滚动到最后一屏或者第一屏是否要接着滚动
         // loopBottom: true,
         // loopTop: true,
         continuousVertical: true,
    
     });
  

3.常用回调函数

• new fullpage('#fullpage', {
      // options here
      // 设置每一屏的背景颜色
      sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
      // 显示指示器
      navigation: true,
      /*
      1.onLeave (origin, destination, direction)
      一旦用户离开某个节，过渡到新节，就会触发此回调。 返回“false”将在移动发生之前取消移动
      origin: (Object) 起始章节相关信息
      destination: (Object) 目标章节相关信息。
      direction: (String) 它将根据滚动方向采用up或down值。
      */
      onLeave: function (origin, destination, direction) {
          console.log("滚动之前调用", origin, destination, direction);
      },
      /*
      2.afterLoad (origin, destination, direction)
      滚动结束之后，一旦加载了节，就会触发回调。参数：
      origin: (Object) 起始章节相关信息
      destination: (Object) 目标章节相关信息。
      direction: (String) 它将根据滚动方向采用up或down值。
       注意点:
       第一次进入网页也会调用afterLoad方法
       只不过第一次进入网页调用的时候,第一个参数和最后一个参数是null
      */
      afterLoad: function (origin, destination, direction) {
          console.log("滚动之后调用", origin, destination, direction);
      }
  });
  

4.fullpage菜单

• //注意  li标签里的data-menuanchor与a标签里面的地址以及anchors里的内容需要一样
  <ul id="myMenu" style="position: fixed; z-index: 999">
      <li data-menuanchor="firstPage" class="active"><a href="#firstPage">第一节</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">第二节</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">第三节</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">第四节</a></li>
  </ul>
  new fullpage('#fullpage', {
          // options here
          // 设置每一屏的背景颜色
          sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
          // 显示指示器
          navigation: true,
        //以下设置菜单
          anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
          menu: '#myMenu'
      });
  

5.360浏览器

6.绝地求生官网