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停止加载')
                }
                //使用锚链接anchorLink
                if (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 的任何媒体元素

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