一、介绍
fullPage.js是一个基于jQuery的插件，他能够很方便、很轻松的制作出全屏网站，主要功能有：
1、支持鼠标滚动
2、多个回调函数
3、支持手机、平板触摸事件
4、支持CSS3动画
5、支持窗口缩放
6、窗口缩放时自动调整
7、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
如何获取fullPage？github地址：https://github.com/alvarotrigo/fullPage.js
fullPage.js不兼容ie6\7，其他的浏览器都兼容
文件大小只有7K.很小，基于MIT协议
二、使用
1、需要先引入jQuery
1、引入fullPage样式文件：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
2、引入jquery文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"><script>
3、引入这个插件，支持更多动画过渡效果：（非必须选的）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.js"/>
4、引入fullPage.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
上面引入的这四个文件都是cdn上面的文件，可以减轻服务器的压力，提高用户访问速度
2、实现基本的效果
1、基本的页面结构
<div id="fullpage">
<div class="section">一些内容</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
</div>
在这个页面中包含了若干个class为section的容器，每个section我们可以称为一个页面，所有的这些页面用一个容器包裹，这个包裹的容器不能是body,我们可以用<div id="fullpage">元素作为容器，但是不是必须是这个id，默认显示第一页，就是第一个section。
2、还可以为每一个section页增加slide（幻灯片）
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
一般section是竖形滚动的，每个section中可以有一组横向滚动的slide，
3、实现基本的效果
激活fullapge效果
在页面载入完成以后
$(document).ready(function(){
$('#fullpage').fullPage(); //最外层包裹的容器上面调用fullPage()方法，方法里面可以有一些配置项
});
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>fullPage简单例子</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
<style>
.section:first-child{
background:green;
}
.section:nth-child(2){
background-color:#FFC125;
}
.section .slide{
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">这是第一屏</div>
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
<div class="section">这是第三屏</div>
<div class="section">这是第四屏</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage();
});
</script>
</body>
</html>
三、fullPage.js API
1、配置项一
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orage','gray','red'],
controlArrows:false,
})
});
①sectionsColor:
可以为每一个section设置background-color属性
②controlArrows:
定义是否通过箭头来控制slide幻灯片，默认为true，当设置为false时，幻灯片左右的箭头就会消失，在移动设备上我们可以通过滑动来操作幻灯片。
③verticalCentered:
每一页的内容是否垂直居中，默认为true,一般我们保持默认值
④resize:
字体是否随着窗口缩放而缩放，默认为false.
⑤scrollingSpeed:
滚动速度，单位是毫秒，默认是700；（对slide也有效）
⑥anchors: anchor锚 anke
定义锚链接，默认值为[],有了锚链接，用户就可以快速打开定位到某一页面，注意定义锚链接的时候，值不要和页面中任意的id或name相同，尤其是在IE浏览器，而且定义时不需要加#
锚链接会为每个section增加一个链接，显示在地址栏中
anchors:['page1','page2','page3','page4']
每一屏后面会加上#page1或着page2，例如：http://localhost:63342/fullPage.js/API/apiOne.html#page4
我们就可以通过收藏网页，定位到相应的页面，就是页面打开就是第三屏这种效果，而不是默认的第一屏，最上端
要想实现相同的效果，可以在页面中某一个section增加一个active,打开了连接之后能够直接打开第三屏，而不是默认的页面最上端，并且连接地址中也不需要带锚
例如：<div class="section active">第三屏</div>
⑦lockAnchors:
是否锁定锚链接，默认为false,如果设置为true，那么定义的锚链接，也就是anchors属性则无效，这个配置项很少使用。
anchors:['page1','page2','page3','page4'],
lockAnchors:true
这两项同时写进去的话，屏幕上下滑动，url后面没有#page1了，但是url#page3仍然能到达第三屏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>fullPage简单例子</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
<style>
.section .slide{
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">这是第一屏</div>
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
<div class="section active">这是第三屏</div>
<div class="section">这是第四屏</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
controlArrows:false,
// verticalCentered:false,
// resize:true,
// scrollingSpeed:2000,
anchors:['page1','page2','page3','page4'],
lockAnchors:true
});
});
</script>
</body>
</html>
2、配置项二
主要是配置页面滚动动画方式
①easing:
定义页面section滚动的动画方式，默认未easeInOutCubic,如果修改此项，需要引入jquery.easings插件，或者jquery ui.
②css3:
是否使用CSS3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果。
③loopTop:
滚动到最顶部后是否连续滚动到底部，默认为false，连续滚动为跳转方式
④loopBottom:
滚动到最底部后是否连续滚动回顶部，默认为false，连续滚动为跳转方式
⑤loopHorizontal:
横向slide幻灯片是否循环滚动，默认是true，设置为false时，滚动到第一个slide时，左边箭头消失，同理滚动到最后一个slide时，右边的箭头消失。
⑥autoScrolling:
是否使用插件的滚动方式，默认为true，如果选择false,则会出现浏览器自带的滚动条，将不会按页滚动而是按照滚动条的默认行为来滚动。
⑦scrollBar:
是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条出现，页面滚动时还是按页滚动，但是滚动条的默认行为也有效。
⑧paddingTop、paddingBottom:
设置每个section顶部和底部的padding，默认都是0,一般如果我们需要设置一个固定在顶部或者底部的菜单、导航、元素等，可以使用这两个配置项。
⑨fixedElements:
固定的元素，默认为null,需要配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动。
用法：fixedElements:'#header'
#header{
position:fixed;
top:0;
right:200px;
}
然后页面中需要有一个id是header的元素，并且这个元素的样式需要固定定位。
⑩keyboardScrolling:
是否可以使用键盘方向健导航，默认为true,
⑪touchSensitivity:
在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量的，最高为100，越大则越难滑动。
⑫continuousVertical:
是否循环滚动，默认为false。如果设置为true，则页面灰循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时使用。（这个循环滚动是正常的像是下面那一屏就是最开始一屏一样，不是跳动的循环，而是把最开始那一屏排在后面，正常动画过渡过去）
⑬animateAnchor:
锚链接是否可以控制滚动动画，默认位 true，如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。（通过url#page2打开页面的时候，默认是有一个页面从下往上滑动出现的效果的，设置为false后，这个效果就没有了）
3、配置项三
①recordHistory:
是否记录历史，默认为true,可以记录页面滚动的历史，通过浏览器的前进后退来导航，注意如果设置了autoScrolling:false，那么这个配置也将被关闭，即设置为false。
②menu:
绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认位false。可以设置为惨淡的jquery选择器。
使用方法，在页面中添加菜单元素
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active">
<a href="#page1">1section</a>
</li>
<li data-menuanchor="page2" class="active">
<a href="#page2">2section</a>
</li>
<li data-menuanchor="page3" class="active">
<a href="#page3">3section</a>
</li>
<li data-menuanchor="page4" class="active">
<a href="#page4">4section</a>
</li>
</ul>
上面标红的值都是固定格式，以及对应的anchors。
在style中把这个元素固定到顶部
#fullpageMenu{position:fixed;top:0; z-index:999;font-size:30px;}
在fullpage({})的json里面增加配置：
anchors:['page1','page2','page3','page4'],
menu:'#fullpageMenu'
必须要有anchors的配置才行
③navigation:
是否显示导航，默认为false 。如果设置为true，会显示小圆点，作为导航。
④navigationPosition:
导航小圆点的位置，可以设置为left或者right
⑤navigationTooltips:
导航小圆点的tooltips设置，默认为[],注意按照顺序设置。
eg:就是在fullpage({
navigation:true,
navigationPosition:'right',
navigationTooltips:['page1','page2','page3','page4']
});
这样页面右边就有了导航小圆点，并且摸上去的时候会提示page1\page2。
⑥showActiveTooltip:
是否显示当前页面的导航的tooltip信息，默认为false，就是上面配置的导航摸上去显示的信息，如果设置为true，就是屏幕到哪一屏，哪一个导航的tooltip就是出来，不需要摸上去。
⑦slidesNavigation:
是否显示横向幻灯片的导航，默认为false。
⑧slidesNavPosition:
横向幻灯片导航的位置，默认为bottom，可以设置为top。
⑨scrollOverflow:
内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合，slimscroll插件主要用于模拟传统的浏览器滚动条。
当一个section中内容超过一个屏幕高度时，会出现一个滚动条，但是不引入slimscroll插件这个滚动条只能看，不能用。
⑩sectionSelector:
section的选择器，默认为.section。
我们<div class="section">第一屏</div>如果我们想修改这个类名，这个属性也要修改。
⑪slideSelector:
slide的选择器，默认为.slide
⑫⑬⑭⑮⑯⑰⑱⑲⑳
四、fullpage方法
1、moveSectionUp()向上滚动一页
eg:$.fn.fullpage.moveSectionDown();
2、moveSectionDown();向下滚动一页
eg:$.fn.fullpage.moveSectionDown();
3、moveTo(section,slide);滚动到第几个，第几个幻灯片，注意：页面是从1开始，而幻灯片是从0开始。
eg:$.fn.fullpage.moveTo(2,2);效果就是先动画过渡到第2个section再动画过渡到第3个slide
4、silentMoveTo(section slide):
滚动到第几页，和moveTo一样，但是没有动画效果。
5、moveSlideRight();
eg:$.fn.fullpage.moveSlideRight();前提是页面已经在slide界面了，不然不起作用
幻灯片向右滚动
6、moveSlideLeft();
幻灯片向左滚动。
7、
setAutoScrolling(boolean):动态设置autoScrolling
setLockAnchors(boolean):动态设置lockAnchors
setRecordHistory(boolean):动态设置recordHistory
setScrollingSpeed(millisecond):动态设置scrollSpeed
8、setAllowScrolling(boolean,[directions]);
添加或删除鼠标滚轮、滑动控制，第一个参数true位启用，false为禁用，后面的参数是方向，取值包括all，up，down，left，right，可以使用多个，逗号隔开。
eg:
$.fn.fullpage.setAllowScrolling(false,'down');
$.fn.fullpage.setAllowScrolling(true,'down');这样再设置一下就可以往下滚动了。
比如我们在做一个有奖问答页面，提问的问题在前面的页面有答案，当滚动到最后一页时，不希望用户载滚回前面查看答案，就可以使用这样的办法。
9、destory（type）
销毁fullpage特效，type可以不写，或者使用all，不写type，fullpage给页面添加的样式和html元素还在，如果使用all,则样式、html等全部销毁，页面恢复和不适用房fullpage相同的效果。
eg:
$.fn.fullpage.destroy();这样fullpage只留下样式了，其他都不起作用了
$.fn.fullpage.destroy('all');这样所有的样式都没有了
10、reBuild()
重新更新页面和尺寸，用于通过ajax请求后改变页面结构之后，重建效果。
11、fullpage还支持延迟加载图片和视频（lazy loading）
图片：
<img data-src="data:image.png">
视频：
<video>
<source data-src="video.webm" type="wideo.webm"/>
<source data-src="video.mp4" type="video/mp4"/>
</video>
主要写法是用data-src代替src属性，就可以使用延迟加载图片。
五、fullpage回调函数
1、afterLoad(anchorLink,index)
滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。
可以根据anchorLink 和index参数值的判断，触发相应的事件。
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
}
每次进入一个页面就会触发一次这个函数，然后console输出一些东西
afterLoad:anchorLink=page1;index=1
2、onLeave(index,nextIndex,direction)
在离开一个section时，会触发一次此回调函数，接收index、nextIndex和direction三个参数
index是离开的页面的序号，从1开始计算
nextIndex是滚动到的目标页面的序号，从1开始计算
direction判断网上滚动还是往下滚动，值是up或者down
通过return false可以取消滚动
3、afterRender()
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。
4、afterResize()
浏览器窗口尺寸改变后的回调函数
5、afterSlideLoad(anchorLink,index,slideAnchor,slideIndex);
滚动到某一幻灯片后的回调函数，与afterLoad类似，接收anchorLink,index,slideIndex,direction四个参数。
6、onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们离开一个slide时，会触发一次此回调函数，与onLeave类似，
五、综合实例
applewatch产品四屏展示
实现步骤：
设计页面
准备文字和图片素材
按照设计实现基本的页面效果
实现动画
六、move.js
move(".section1 h1").set("margin-left","20%").end();
 
 

FullPage.js全屏滚动插件的更多相关文章

  1. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  2. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  3. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  4. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  5. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  6. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  7. fullPage.js全屏滚动插件API

    API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...

  8. FullPage.js全屏滚动插件解说

    1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...

  9. jQuery fullPage.js 全屏滚动

    fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...

随机推荐

  1. Spring MVC多解析器映射

    如果想在spring mvc应用程序中使用多个视图解析器,那么可以使用order属性设置优先级顺序. 以下示例显示如何在Spring Web MVC框架中使用ResourceBundleViewRes ...

  2. JavaScript 代码块

    JavaScript 语句通过代码块的形式进行组合. 块由左花括号开始,由右花括号结束. 块的作用是使语句序列一起执行. JavaScript 函数是将语句组合在块中的典型例子. 下面的例子将运行可操 ...

  3. Unity3D学习笔记——NGUI之Property Binding

    Property Binding:用于绑定两个组件,然后可以将一个组件的信息发送给另一个组件. 效果图如下: 一:使用步骤 1.建立一个Sprite 2.建立一个Label 3.为Sprite添加Pr ...

  4. Windows API之DuplicateHandle

    在进程之间共享内核对象句柄的一种方法:DuplicateHandle 简单地说,该函数取得某个进程句柄表中的一个表项,然后把它拷贝到另一个进程的句柄表中. BOOL WINAPI DuplicateH ...

  5. GetWindowText 卡死的一种可能的原因

    最近一个项目中碰到GetWindowText经常卡死的问题,这个项目有多个线程,检查代码发现发生死锁的是一个数据线程和一个UI线程. 示意图大致如下(data thread和UI thread在同一个 ...

  6. Laravel 的中大型专案架构

    好文:http://oomusou.io/laravel/laravel-architecture/

  7. JS探秘——那些你理解存在偏差的问题

    Javascript的连续赋值运算 var a = {n:1}; a.x = a = {n:2}; alert(a.x); // --> undefined 看 jQuery 源码 时发现的这种 ...

  8. Session基础知识

    Session基础知识 主题 概念  Session的创建 Session的存储机制 Session的失效 参考资料   概念        Session代表一次用户会话.一次用户会话的含义是:从客 ...

  9. delphi小知识 点（if条件符，to_date）

    1.if条件 与:and 或:or 不等于:<> 等于:= 例子: if(j=1)and(nFH<>0) then begin tLCH:=Trim(copy(tSAMPLEI ...

  10. KVC && KVO 初见

    Look,这是一个很简单的要求,点击Add me,age +1. 想一想的话很简单的,设置一个属性Nsinteger age,点击button add me,直接加1在重新显示Lable就好啦,不过, ...