前端开发之Fullpage.js的使用

来源： All文章

发布时间：2023-04-11 17:07:38

　　Fullpage.js是一个用于整屏切换的js插件，可以做出非常好看的页面整屏切换效果。它主要功能有：

　　1.支持鼠标滚动；

　　2.支持前进后退和键盘控制；

　　3.多个回调函数；

　　4.支持手机、平板触摸事件；

　　5.支持CSS3动画；

　　6.支持窗口缩放；

　　7.窗口缩放时自动调整；

　　8.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。

　　使用需要先引入fullpage.css和fullpage.js，其兼容性除了IE8一下，其他主流浏览器都有较好的支持，大可放心使用。

　　Html结构如下图：Js如图：

　　Fullpage.js有需多参数来设置你需要的炫酷效果如图：

　　还有许多方法来实现功能：

　　moveSectionUp()：向上滚动一个section；

　　moveSectionDown()：向下滚动一个section；

　　moveTo(section，slide)：将页面滚动到目标section和滑动。section从1开始，slide从0开始。；

　　moveSlideRight()：将当前slide的水平滑块滚动到下一张slide；

　　moveSlideLeft()：将当前slide的水平滑块滚动到上一张slide；

　　setAutoScrolling()：动态设置autoScrolling。定义页面滚动行为的方式。如果设置为true，则将使用自动滚动，否则将使用站点的手动或正常滚动；

　　setAllowScrolling()：添加或者禁止fullpage自动绑定的鼠标滑轮和移动触摸事件；

　　setKeyboardScrolling()：添加或者禁止键盘对section/slide的控制（默认绑定）；

　　setScrollingSpeed()：定义以毫秒为单位的滚动速度；

　　回调函数功能：

　　afterLoad：滚动到某一屏后的回调函数，接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。

　　onLeave：滚动前的回调函数，接收index、nextIndex和direction3个参数：index是离开的页面的序号，从1开始计算；nextIndex是滚动到的页面的序号，从1开始计算；direction判断往上滚动还是往下滚动，值是up或down。

　　afterRender：页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。

　　afterSlideLoad：滚动到某一水平滑块后的回调函数，与afterLoad类似，接收anchorLink、index、slideIndex、direction4个参数。

　　onSlideLeave：某一水平滑块滚动前的回调函数，与onLeave类似，接收anchorLink、index、slideIndex、direction4个参数。

* 文章来源于网络，如有侵权，请联系客服删除处理。