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

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

1. fullpage.js的主要功能

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

主要功能有：

支持鼠标滚动。
支持前后退和键盘控制。
多个回调函数。
支持手机，平板触摸事件。
支持css3动画。
支持窗口缩放。
窗口缩放时自动调整。
可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。

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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- 如果是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="en">

<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="data: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();

});

配合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案例参考地址：案例

联系老马

对应视频地址：https://qtxh.ke.qq.com/
老马qq： 515154084
老马微信：请扫码

扫码加老马微信

06-移动端开发教程-fullpage框架的更多相关文章

11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...
01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
推荐一个基于Vue2.0的的一款移动端开发的UI框架，特别好用。。。
一丶YDUI 一只注重审美,且性能高效的移动端&微信UI. 下面为地址自己研究去吧! 我的项目正在用,以前用的Mint-ui但是现在感觉还是这个好一点,官方给出的解释很清楚,很实用. 官方地址 ...
09-移动端开发教程-Sass入门
1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量.函数.循环.分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也 ...
05-移动端开发教程-CSS3兼容处理
CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准.浏览器有时会给一些在试验阶段或非标准阶 ...
03-移动端开发教程-CSS3新特性（下）
1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限. transition需要事件触发,所以没法在网页加载时自动发生. transition是一次性 ...
02-移动端开发教程-CSS3新特性（中）
1. 新的背景背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...
大前端全栈CSS3移动端开发
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正本节课学习视频来源:https://ww ...
Taurus.MVC 微服务框架入门开发教程：项目集成：1、服务端：注册中心、网关（提供可运行程序下载）。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

随机推荐

CEOI2004锯木厂选址
斜率优化 # include <stdio.h> # include <stdlib.h> # include <iostream> # include <s ...
Java学习第一周
第一周学习了JDK的安装和环境的配置,初步了解了Java与C的不同之处,学习了Java的变量.基本数据类型.以及面向对象的基础.并且自行完成了一些简单Java程序的编写. (1)学习了为什么使用抽象类 ...
TypeScript入门知识四（表达式和循环）
一,箭头表达式用来声明匿名函数,消除传统匿名函数的this指针问题 //单行的话可以省略{},多行的不能省. var sum = (arg1,arg2)=> arg1+arg2; //定义一个 ...
利用Cglib实现AOP
前文讲了, 可以利用Spring, Guice等框架提供的容器实现AOP, 如果想绕过容器, 直接注入Class, 可以利用Cglib为对象加上动态代理,实现代码切入, 但是每次调用比较繁琐, 因此我 ...
13.C++-静态成员变量、静态成员函数
首先回顾下成员变量能通过对象名能够访问public成员变量每个对象的成员变量都是专属的成员变量不能在对象之间共享再来讲讲类的静态成员变量介绍静态成员变量属于整个类所有静态成员变量的生命期 ...
转： web 页面加载速度优化实战-100% 的飞跃提升
前言一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
.Net Core 2.0+ InfluxDB+Grafana+App Metrics 实现跨平台的实时性能监控
最近这段时间一直在忙,没时间写博客,负责了一个项目,从前端到后端一直忙,同时还有其他第几个项目的系统架构要处理. 去年就开始关注net core了,只是平时写写demo,没用在项目中,正好这次机会就用 ...
java语言环境jdk的安装和环境变量的配置
一.jdk的安装我安装的为64位的1.7.0_17版本的jdk,双击运行,全部默认下一步就行此处可整改安装目录,然后点击下一步进行安装. 二.环境变量的配置 1.右键点击我的电脑à点击属性,出现如 ...
fail2ban防止SSH暴力破解
[root@kazihuo /srv]# wget https://github.com/fail2ban/fail2ban/archive/0.8.14.tar.gz [root@kazihuo / ...
二分查找的变种(Java实现)
普通二分查找: 先回顾一下普通的二分查找注意:二分查找有这样一个问题:当数组中数有重复时,比如 {3,3,3,3} 这个数组,二分查找3时,返回的是arr[1],也就是说二分查找并不会返回3第一次出 ...

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