fullpage初使用

fullpage介绍

fullpage.js是一个基于jQuery的全屏滚动插件，能够方便，省时，轻松的制造出全屏网站，在工作当中可能也会用到的。

fullpage的下载

兼容性：jQuery支持jQuery1.7+，浏览器支持IE8+，Chrome，Firefox，Opera，Safari，可兼容支持CSS3的浏览器与非支持CSS3的浏览器

github上的fullpage主页及下载地址(有中文的) https://github.com/alvarotrigo/fullPage.js

// 可以使用npm进行下载安装
npm install fullpage.js

fullpage的引入顺序

fullpage插件依赖jQuery库，所以最先需要的是引入jQuery库

 <link rel="stylesheet" type="text/css" href="fullpage.css" />//jQuery文件<script src="./src/js/tool/jquery-1.8.3.min.js"></script>//fullpage.js根据需求引入<script src="./src/js/tool/fullpage.js"></script>

fullpage主要功能

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

回调函数

afterLoad
滚动结束之后，只要加载了 section ，就会触发回调函数

语法：afterLoad(origin, destination, direction)
origin：前置section（对象形式Object）
destination：目标section（Object）
direction：滚动的方向up或者down（String）

onLeave
当用户离开当前section，就会直接过渡到新的section，就立即触发回调函数
若返回false则会在移动发生之前取消移动

语法：onLeave(origin, destination, direction)
origin：前置section（对象形式Object）
destination：目标section（Object）
direction：滚动的方向up或者down（String）

$('#wrapper').fullpage({sectionsColor: ['#c2e5ff', '#ccc', '#7baabe', '#f40'],afterLoad: function (origin) {// 某一页切换到眼前执行var loadeSection = this;if (orgin.index == 3) {console.log('第四个section停止加载')}//使用锚链接anchorLinkif (origin.anchor == 'thirdSlide') {console.log('第三个section停止加载')}},onLeave: function(origin, destination, direction){var leavingSection = this;//离开第三个section之后if (origin.index == 1 && direction == 'down'){console.log('移到第四个section')}else if(origin.index == 1 && direction == 'up'){console.log('移到第一个section')}}});

懒加载时
当我们使用懒加载时，并不会对数据传输及网站加载速度有所影响，使用时，只有等所有的这些元素进入到视口时才加载。

//使用时，src属性改为data-src
<img data-src = 'logo.png'>
<video><source data-src = 'video.webm' type = 'video/webm' /><source data-src = 'video.mp4' type = 'video/mp4' />
</video>//注意：若另一个已经使用了`data-src`的懒加载,则可通过`lazyLoading: false`来禁用fullpage.js的懒加载
//lazyLoading: （默认true）懒加载默认是激活的，会延迟加载包含属性 data-src 的任何媒体元素

如有错误之处，请指正，谢谢！

fullpage初使用相关推荐

python教学反思_Python第3课if教学反思：准备充分承上启下，优化内容模式初显
5月6日,大陈完成了和初中生一起学Python第3课的5个班教学,本节课教学设计请见我之前发布的:初中生学Python第3课,学习条件控制if语句,这样设计靠谱吗? 本节课在设计之初就吸取了第2课教学 ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
《父亲家书》选：给初为人师的儿子
文飞: 离家已二十九天了,可能是年纪大了的缘故,不要说你妈妈,就连我也想念你了!为不影响你工作,我坚持不够一个月"决"不给你去信.这不到期了,就按时给你去信. 你上次来 ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
专访思必驰初敏：离开微软、放弃阿里，一个语音交互的“实用主义者”
栏目简介:激荡六十年,人工智能已经起航.然而在未来面前,我们都还是孩子.究竟是"奇点临近"?还是泡沫行将破灭?为了解惑,<AI名人堂>将汇聚领航者智慧,和你一起探索前行 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
初入职场的我怎么就成了个打杂的，我是这样破局的 No.146
本文为转载文章,转载于公众号:一名叫大蕉的程序员这么快就到6月份了,又到一大批有为青少年离开象牙塔摩拳擦掌准备进入职场大干一番的季节.但很多人也开始迷茫起来,毕竟啊,那个以考试成绩为唯一标记性成果的 ...

fullpage初使用

fullpage初使用相关推荐

最新文章

热门文章