Fullpage
一 Fullpage基本配置项
01 sectionsColor: 接收一个数组做为参数,可以给每一屏添加背景色。如果需要设置背景图片那么需要自已遍历实现。
02 anchors: 同样接收一个数组做参数,相当于给每一屏起一个名字,方便做锚点导航和某一屏查看。
03 verticalCentered: 默认值是 true 设置 false 表示当前屏的文字内容显示居顶
04 scrollingSpeed: 默认值是 700ms 表示每屏滚动所需要的时长
05 css3 : 默认值为 true 表示滚动动画采用 C3形式,设置为 false 表示使用 JQ 中的 animate 动画,二者区别在于 C3的动画性能优于 JQ
06 resize: 默认值是 false 表示不允许页面中的文字随屏幕缩放而缩放
-
addingTop || paddingBottom : 用来设置每屏幕内容的上 下 内边距
二 滚动条相关配置
01 continuousVertical: 设置为 true 表示开启每屏的无缝滚动
02 scrollOverflow:设置为 true 配合一个鼠标滚轮 JS ,可以在某一屏内容超高的时候生成一个自定义的滚动条,保证该屏内容可以完全显示。
03 autoScrolling: 设置为 false 表示滚屏操作优先响应用户的滚动,默认值为true 表示滚屏操作采用 插件自带形式
04 scrollBar : 默认值为 false 表示不显示浏览器自带滚动条
05 loopTop 和 loopBottom: 这二个值设置为 true 分别表示开启向上和向下滚动时的循环滚动,不能和 continuousVertical 同时使用
三 导航条相关配置
01 navigation: 默认值为 false 设置为 true 表示显示插件提供的右侧圆点导航
02 navigationTooltips: 设置一个数组,给每一屏设置一个标示性文字内容
03 showActiveTooltip: 设置为 true 表示显示当前屏的提示文字
04 slidesNavigation: 设置为true 在有轮播图的时候显示下方的圆点导航
05navigationPostion: 默认值为 right
四 Fullpage 自带轮播图
Fullpage中提供了非常方便的轮播图制作,只需要给盒子添加类 slide 即可,一个slide就代表一张图片,默认提供是有缝滚动。
对于插件的使用是可以复写 CSS 来改变显示样式的,复写的CSS要写在插件的下方。
五 Fullpage锚点导航
01 在配置项中给每一屏都起一个锚点名
-
在导航条 a 标签的 href 中写上对应的 #锚点名
六 Fullpage中的回调函数
01 afterLoad: 当某一屏幕加载完之后自动执行的函数
02 onLeave: 当离开某一屏的时候自动执行的函数
afterLoad:function( link,index ){
// link 表示每一屏的锚点名
// index 表示当前显示的是哪一屏 从1 开始
}
onLeave:function( index,nextIndex,dir ){
// index || nextIndex 分别示离开哪一屏 滚向哪一屏
// dir 表示当前操作的滚动方向
}