400-800-9385
网站建设资讯详细

前端开发之Fullpage.js的使用

发表日期:2022-03-29 09:44:43   作者来源:严成   浏览:3815   标签:前端开发    
Fullpage.js是一个用于整屏切换的js插件,可以做出非常好看的页面整屏切换效果。它主要功能有:1.支持鼠标滚动;2.支持前进后退和键盘控制;3.多个回调函数;4.支持手机、平板触摸事件;5.支持 CSS3 动画;6.支持窗口缩放;7.窗口缩放时自动调整;8.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。
使用需要先引入fullpage.css和fullpage.js,其兼容性除了IE8一下,其他主流浏览器都有较好的支持,大可放心使用。
Html结构如下图:

HTML代码

Js如图:

JS代码

Fullpage.js有需多参数来设置你需要的炫酷效果如图:
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 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。
afterRender:页面结构生成后的回调函数,或者说页面初始化完成后的回调函数。
afterSlideLoad:滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数。
onSlideLeave:某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6379.html