AICODER大前端培训

AICODER-IT培训专家,前端培训基地,前端培训,全栈培训,大学生IT培训基地,线上IT课程免费自学,线下培训项目实战,实习,html5培训实习-AICODE程序员

在线咨询

06-移动端开发教程-fullpage框架

AICODER官方 发布于: 2019年6月13日 9时1分25秒 阅读114次

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。

下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。

1. fullpage.js的主要功能

fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址

主要功能有:

  1. 支持鼠标滚动。

  2. 支持前后退和键盘控制。

  3. 多个回调函数。

  4. 支持手机,平板触摸事件。

  5. 支持css3动画。

  6. 支持窗口缩放。

  7. 窗口缩放时自动调整。

  8. 可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。

2. fullpage.js的使用

2.1 兼容性

fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。

2.2 下载fullpage.js

第一种方法: 直接下载压缩包,地址

第二种方法: 使用前端的包管理工具

// With bower
bower install fullpage.js

// With npm
npm install fullpage.js

第三种: CDNJS地址:https://cdnjs.com/libraries/fullPage.js

2.3 引入文件及文件依赖关系

fullpage.js插件依赖:fullpage的css文件,jQuery,如果设置了options中css3: false*,如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话,需要添加 jQuery UI library

引入依赖的文件,注意顺序!

<!--引入fullpage.js插件的样式,必须-->
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src=" 
<!-- 如果是ie8浏览器或者设置了css3: false 那么需要引入jQuery的easing缓动插件,默认可以省略就行了。 -->
<script src="vendors/jquery.easings.min.js"></script>
<!--引入jQuery的插件fullpage.js核心文件-->
<script type="text/javascript" src="jquery.fullPage.js"></script>

2.4 编写页面结构

编写html的页面结构,每个section独占一屏幕,默认显示第一屏。

<div id="fullpage">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">第三屏</div>
  <div class="section">第四屏</div>
</div>

如果需要从非第一屏开始显示,则需要给对应的section添加active样式类即可。

<div class="section active">第三屏</div>

2.5 编写初始化的脚本

$(function() {
  $('#fullpage').fullpage();
});

完整代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全屏插件</title>
  <link rel="stylesheet" href="./js/fullpage/jquery.fullpage.css">
  <script src="./js/jquery-1.11.3.min.js"></script>
  <script src="./js/fullpage/jquery.fullpage.min.js"></script>
</head>
<body>
  <div id="dowebok">
    <div class="section">
      <h3>第一屏</h3>
    </div>
    <div class="section">
      <h3>第二屏</h3>
    </div>
    <div class="section">
      <h3>第三屏</h3>
    </div>
    <div class="section">
      <h3>第四屏</h3>
    </div>
  </div>
  <script>
    $(function () {
      $('#dowebok').fullpage();
    });  
  </script>
</body>
</html>

3. fullpage的初始化的设置

在初始化全屏插件的时候,有很多设置项。如下所示:

$(document).ready(function() {
    $('#fullpage').fullpage({        //Navigation
        menu: '#menu',        
        lockAnchors: false,        
        anchors:['firstPage', 'secondPage'],        
        navigation: false,        
        navigationPosition: 'right',        
        navigationTooltips: ['firstSlide', 'secondSlide'],        
        showActiveTooltip: false,        
        slidesNavigation: false,        
        slidesNavPosition: 'bottom',        //Scrolling
        css3: true,        
        scrollingSpeed: 700,        
        autoScrolling: true,        
        fitToSection: true,        
        fitToSectionDelay: 1000,        
        scrollBar: false,        
        easing: 'easeInOutCubic',        
        easingcss3: 'ease',        
        loopBottom: false,        
        loopTop: false,        
        loopHorizontal: true,        
        continuousVertical: false,        
        continuousHorizontal: false,        
        scrollHorizontally: false,        
        interlockedSlides: false,        
        dragAndMove: false,        
        offsetSections: false,        
        resetSliders: false,        
        fadingEffect: false,        
        normalScrollElements: '#element1, .element2',        
        scrollOverflow: false,        
        scrollOverflowReset: false,        
        scrollOverflowOptions: null,        
        touchSensitivity: 15,        
        normalScrollElementTouchThreshold: 5,        
        bigSectionsDestination: null,        //Accessibility
        keyboardScrolling: true,        
        animateAnchor: true,        
        recordHistory: true,        //Design
        controlArrows: true,        
        verticalCentered: true,        
        sectionsColor : ['#ccc', '#fff'],        
        paddingTop: '3em',        
        paddingBottom: '10px',        
        fixedElements: '#header, .footer',        
        responsiveWidth: 0,        
        responsiveHeight: 0,        
        responsiveSlides: false,        
        parallax: false,        
        parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},        //Custom selectors
        sectionSelector: '.section',        
        slideSelector: '.slide',        
        lazyLoading: true,        //events
        onLeave: function(index, nextIndex, direction){},        
        afterLoad: function(anchorLink, index){},        
        afterRender: function(){},        
        afterResize: function(){},        
        afterResponsive: function(isResponsive){},        
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},        
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});

哇有很多设置项,还有事件处理程序。

他们的详细介绍如下:

  • 选项

选项类     型默认值说明
verticalCentered字符串true内容是否垂直居中
resize布尔值false字体是否随着窗口缩放而缩放
slidesColor函数设置背景颜色
anchors数组定义锚链接
scrollingSpeed整数700滚动速度,单位为毫秒
easing字符串easeInQuart滚动动画方式
menu布尔值false绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
navigation布尔值false是否显示项目导航
navigationPosition字符串right项目导航的位置,可选 left 或 right
navigationColor字符串#000项目导航的颜色
navigationTooltips数组项目导航的 tip
slidesNavigation布尔值false是否显示左右滑块的项目导航
slidesNavPosition字符串bottom左右滑块的项目导航的位置,可选 top 或 bottom
controlArrowColor字符串#fff左右滑块的箭头的背景颜色
loopBottom布尔值false滚动到最底部后是否滚回顶部
loopTop布尔值false滚动到最顶部后是否滚底部
loopHorizontal布尔值true左右滑块是否循环滑动
autoScrolling布尔值true是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow布尔值false内容超过满屏后是否显示滚动条
css3布尔值false是否使用 CSS3 transforms 滚动
paddingTop字符串0与顶部的距离
paddingBottom字符串0与底部距离
fixedElements字符串
normalScrollElements

keyboardScrolling布尔值true是否使用键盘方向键导航
touchSensitivity整数5
continuousVertical布尔值false是否循环滚动,与 loopTop 及 loopBottom 不兼容
animateAnchor布尔值true
  • 事件

名称说明
afterLoad滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
onLeave滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;
nextIndex是滚动到的“页面”的序号,从1开始计算;
direction判断往上滚动还是往下滚动,值是 up 或 down。
afterRender页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterSlideLoad滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数

案例1:延迟加载案例:

<!--图片或者视频的延迟加载, 只需要把src改成data-src -->
<img data-src="image.png">
<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>
    <!--另外不能在初始化的设置:lazyLoading: true ,不能为false-->

案例2:设置不同屏的背景色

$('#fullpage').fullpage({    
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

4. fullpage的方法

名称说明
moveSectionUp()向上滚动
moveSectionDown()向下滚动
moveTo(section, slide)滚动到
moveSlideRight()slide 向右滚动
moveSlideLeft()slide 向左滚动
setAutoScrolling()设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling()添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()添加或删除键盘方向键控制
setScrollingSpeed()定义以毫秒为单位的滚动速度

例如:

$('#moveSectionUp').click(function(e){
  e.preventDefault();
  $.fn.fullpage.moveSectionUp();
});
  1. 配合animate.css实现动态效果案例

首先说明animate.css本身就有兼容问题,ie9+浏览器可以无视,另外考虑到手机的性能,移动端尽量不要使用大量动画。

一般情况下都是用户进入某个屏的时候,动画开始启动入场,离开的时候启动出场(可以省略),然后下一屏开始入场。配合animate.css的问题,animate的动画添加上animated样式和具体的动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果,不是我们想要的结果。

配合fullpage的onLeave事件,可以实现在上一屏离开的时候,给下一屏添加动画样式类,并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。例如代码:

<div id="fullpage">
    <div class="section s1">
      <h3 class="sec-title amt amt-delay-3 lightSpeedIn" amt="lightSpeedIn">人工智能时代,学习编程让孩子不一样的未来!</h3>
      <div class="img-list amt amt-delay-6 bounceInUp" amt="bounceInUp">
        <img data-src="./img/s1-1.png" alt="孩子的未来">
        <img data-src="./img/s1-2.jpg" alt="孩子的未来">
        <img data-src="./img/s1-3.jpg" alt="孩子的未来">
      </div>
    </div>
    <div class="section s2">
      <h3 class="sec-title amt amt-delay-3" amt="bounceInDown">我们的理念</h3>
      <ul class="s2-l amt amt-delay-6" amt="slideInLeft">
        <li class="s2-l-item">imagine(想象):让孩子去天马行空;</li>
        <li class="s2-l-item">create(创造):通过创造现实结合起来;</li>
        <li class="s2-l-item">play(动手玩):亲自动手创作项目;</li>
        <li class="s2-l-item">share(分享):项目分享给其他人;</li>
        <li class="s2-l-item">reflect(反思):对项目的反思和改进。</li>
      </ul>
      <div class="s2-r amt amt-delay-8" amt="slideInRight">
        <img data-src="./img/s2-1.png" alt="少儿编程">
      </div>
    </div></div><script>
    $(function () {
      $('#fullpage').fullpage({        sectionsColor: ['rgba(88,185,156, 1)', '#fff', '#DE8910', '#0da5d6', 'rgb(235, 76, 67)', 'rgb(141, 127, 219)', 'rgb(227,135,88)','rgb(98,198,188)' ],        lazyLoading: true,        onLeave: function (index, nextIndex, direction) {
          $('.section').find('.amt').each(function(index, elem) {            var amt = $(elem).attr('amt');
            $(elem).removeClass(amt);
          })
     
          $('.section').eq(nextIndex-1).find('.amt').each(function(index, elem) {            var amt = $(elem).attr('amt');
            $(elem).addClass(amt)
          })
        }
      });
    });  </script>

fullpage.js + animate.css案例参考地址:案例


AICODER编辑推荐:



报名就业班送基础班

最近分享