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 表示不允许页面中的文字随屏幕缩放而缩放

  1. 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 在配置项中给每一屏都起一个锚点名

  1. 在导航条 a 标签的 href 中写上对应的 #锚点名

六 Fullpage中的回调函数

01 afterLoad: 当某一屏幕加载完之后自动执行的函数

02 onLeave: 当离开某一屏的时候自动执行的函数

 

afterLoad:function( link,index ){

    // link 表示每一屏的锚点名

    // index 表示当前显示的是哪一屏 从1 开始

}

 

onLeave:function( index,nextIndex,dir ){

 

    // index || nextIndex 分别示离开哪一屏 滚向哪一屏

    // dir 表示当前操作的滚动方向

}

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: