依赖文件
<link rel="stylesheet" href="lib/jquery.fullPage.css">
<script src="lib/jquery.js"></script>
<script src="lib/jquery.fullPage.js"></script>
CDNJS 上提供的完整的 JavaScript库列表http://cdnjs.com/
基本页面结构
<div id="fullpage">
<div class="section">
<div class="slide">第一页第一屏</div>
<div class="slide">第一页第二屏</div>
<div class="slide">第一页第三屏</div>
<div class="slide">第一页第四屏</div>
</div>
<div class="section">第二页</div>
<div class="section">第三页</div>
<div class="section">第四页</div>
</div>
section竖向滚动，section内的slide横向滚动；section默认显示第一页
激活fullpage效果：
$(document).ready(function(){
$("#fullpage").fullpage();
})
fullpage基本配置项：
sectionsColor：为每个section设置背景色background-color
sectionsColor:["pink","green","blue","gray"]
controlArrows：定义是否通过箭头控制slide幻灯片，默认true;设置为false则幻灯片左右两侧箭头消失，移动设备上也可以通过滑动操作幻灯片。
verticalCentered：每一项内容是否垂直居中，默认true;一般保持默认值
resize：字体是否随着窗口缩放而缩放，默认false
scrollingSpeed：滚动速度，单位毫秒，默认700
anchors：定义锚链接，默认为[];定义锚链接时值不要和页面中任意的id或name相同，尤其是在IE浏览器下；而且定义时不要加#；锚链接会为每个section增加一个链接，显示在地址栏中，不可重复，与section一一对应；定义锚链接后比如收藏时会直接定位到收藏的页面;直接定位到某个页面也可以通过给该section添加一个active类做到
anchors:["page1","page2","page3","page4"]
lockAnchors：是否锁定锚链接，默认false；如果设置为true，定义的锚链接也就是anchors属性则无效。该配置项使用的较少
easing：定义页面section滚动的动画方式，默认为easeInOutCubic，如果要修改此项，需引入jquery.easing插件或者jquery ui。
css3：是否使用css3 transforms来实现滚动效果，默认true；该配置项可以提高支持css3的浏览器比如移动设备等的速度，如果浏览器不支持css3则会使用jquery来替代css3实现滚动效果;chrome、firefox、360浏览器下设置为false则页面不能滚动。
loopTop：滚动到最顶部后是否连续滚动到底部，默认false
loopBottom：滚动到最低部后是否连续滚动回顶部，默认false
loopHorizontal：横向slide幻灯片是否循环滚动，默认为true
autoScrolling：是否使用插件的滚动方式，默认true；如若设置为false则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来滚动。
scrollBar：是否包含滚动条，默认false；若设置为true则浏览器自带的滚动条出现，页面滚动时还是按页滚动，但是滚动条的默认行为也有效
autoScrolling和scrollBar同时设置为true，则页面不能滚动
autoScrolling和scrollBar同时设置为false，则页面出现滚动条，按照滚动条的默认行为来滚动
autoScrolling:false 同时scrollBar:true,页面出现滚动条，按照滚动条的默认行为来滚动
paddingTop/paddingBottom:设置每一个section顶部和底部的padding，默认都是0；一般如果要设置一个固定在顶部或者底部的菜单、导航、元素等时，可以使用这两个配置项。
paddingTop:"20px",
paddingBottom:"20px"
fixedElements：固定的元素，默认为null，需配置一个jquery选择器；在页面滚动时fixedElements设置的元素固定不动。
注意：配置了该项的同时需给元素写固定定位的样式；如果不配置该项，而是只给#fullpage外需固定定位的元素写固定定位的样式，该元素在页面滚动过程中会被覆盖掉（若想不被覆盖掉，可以给z-index设置一个很大的值，如z-index:1000)。
<div id="header">header</div>
<div id="fullpage">
<div class="section">
<h1>第一页</h1>
</div>
<div class="section">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<div class="section">第三页</div>
</div>
#header{
height: 50px;
width: 100%;
line-height:50px;
font-size:24px;
background:red;
position:fixed;
top:20px;
}
同时设置
fixedElements:"#header"
仅仅写css可以达成上述效果,如：
#header{
height: 50px;
width: 100%;
line-height:50px;
font-size:24px;
background:red;
position:fixed;
top:20px;
z-index:1000;
}
keyboardScrolling：是否可使用键盘方向键导航，默认true
touchSensitivity：在移动设备中滑动页面的敏感性，默认5，按百分比衡量，最高100，越大则越难滑动。
continuousVertical：是否循坏滚动，默认false;若设置为true，则页面会顺滑地循环滚动，而不是像loopTop或loopBottom那样出现跳动。++这个属性和loopTop\loopBottom不兼容，不要同时设置；若scrollBar设置为true则也不兼容，页面不能滚动++
animateAnchor：锚链接是否可以控制滚动动画，默认true；若设置为false，则通过锚链接定位到某个页面显示不再有动画效果。
recordHistory：是否记录历史，默认true，可记录页面滚动的历史，通过浏览器的前进后退来导航；若设置了autoScrolling:false，那么这个配置也将被关闭，即设置为false。
menu：绑定菜单，设定相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jquery选择器。例：
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active">
<a href="#page1">1 section</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">2 section</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">3 section</a>
</li>
<li data-menuanchor="page4">
<a href="#page4">4 section</a>
</li>
</ul>
<div id="fullpage">
<div class="section">第一页</div>
<div class="section">第二页</div>
<div class="section">第三页</div>
<div class="section">第四页</div>
</div>
css
<!--将ul固定在页面顶部-->
ul{
position:fixed;
top:0;
right:0;
left:0;
height: 50px;
background:#fff;
color:#000;
z-index:1000;
list-style:none;
margin:0;
padding:0;
}
ul li{
width: 25%;
height: 50px;
line-height: 50px;
float:left;
font-size:12px;
vertical-align:center;
}
配置项：
anchors:["page1","page2","page3","page4"],
menu:"#fullpageMenu"
navigation：是否显示导航，默认false；如果设置为true,会显示小圆点作为导航。
navigationPosition==：导航小圆点的位置，可设置为left或right;默认right。
navigationTooltips：导航小圆点的tooltips设置，默认为[]，注意按照顺序设置。（鼠标点击小圆点时会显示什么文字）
showActiveTooltip：是否显示当前页面的导航的tooltip信息，默认false。
slidesNavigation：是否显示横向幻灯片slide的导航，默认false。
slidesNavPosition：横向幻灯片slide导航的位置，默认为bottom,可以设置为top或bottom。
scrollOverflow：内容超过满屏后是否显示滚动条，默认false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。
sectionSelector：section的选择器，默认.section。
slideSelector：slide的选择器，默认.slide。
方法：
$.fn.fullpage.方法名称()
moveSectionUp()：向上滚动一页。
moveSectionDown()：向下滚动一页。
moveTo(section,slide)：滚动到第几页第几张幻灯片（参数为整数，页面从1开始，幻灯片从0开始）。
silentMoveTo(section,slide)：和moveTo(section,slide)一样，但是没有动画效果。
moveSlideRight()：幻灯片向右滚动。
moveSlideLeft()：幻灯片向左滚动。
setAutoScrolling(boolean)：动态设置autoScrolling
setLockAnchors(boolean)：动态设置lockAnchors
setRecordHistory(boolean)：动态设置recordHistory
setScrollingSpeed(milliseconds)：动态设置scrollingSpeed
setAllowScrolling(boolean,[directions])：添加或删除鼠标/滑动控制；第一个参数为true时启用，false禁用；后面的参数为方向，取值包含all、up、down、left、right，可以使用多个，用逗号分隔。（比如在做有奖问答页面时，提问的问题在前面的页面有答案，当滚动到最后一页时不希望用户再滚动回之前的页面查看答案，就可以使用这种方法）
destroy(type)：销毁fullpage特效，type可以不写，或者使用all；不写type，fullpage给页面添加的样式和html元素还在；如果使用all，则样式、html等全部销毁，页面恢复和不使用fullpage相同的效果。
reBuild()：重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果。
lazy loading
<img data-src="image.png" alt="">
<video data-src="video.webm"></video>
<video data-src="video.webm"></video>
通过把src换为data-src实现。
fullpage回调函数
afterLoad(anchorLink,index)：滚动到某一屏后（滚动结束后）的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算。
onLeave(index,nextIndex,direction)：离开一个section时会触发一次该回调函数。index 是离开的“页面”的序号，从1开始计算；
nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
通过return false可以取消滚动。
afterRender()：页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。
afterResize()：浏览器窗口尺寸改变后的回调函数。
afterSlideLoad(anchorLink,index,slideIndex,direction)：滚动到某一水平滑块后的回调函数，与 afterLoad 类似。
onSlideLeave(anchorLink,index,slideIndex,direction)：离开一个slide时会触发一次该回调函数，和onLeave类似。
onSlideLeave:function(page2,slide2,slide3,left){
console.log("sss")
}
网友评论