fullpage 的方法介绍及使用

最新推荐文章于 2025-03-29 14:58:16 发布

wenxin_liu

最新推荐文章于 2025-03-29 14:58:16 发布

阅读量2.7k

点赞数

本文链接：https://blog.youkuaiyun.com/wenxin_liu/article/details/106457507

版权

本文介绍了fullpage.js库中的滚动方法，包括moveSectionUp()、moveSectionDown()、moveTo()等，以及静默滚动、幻灯片滚动操作。同时，详细阐述了setAllowScrolling()方法的应用场景，例如在有奖问答页面防止用户回滚。此外，还讲解了destroy()、reBuild()等关键方法，并提到了fullpage.js的多个回调函数，如afterLoad()、onLeave()、afterSlideLoad()等，这些回调函数在滚动过程中起到触发相应操作的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fullpage 的方法

moveSectionUp(): 向上滚动一页
moveSectionDown(): 向下滚动一页
moveTo(section,slide): 滚动到第几页第几个幻灯片 section从1开始 slide从0开始
使用方式

$.fn.fullpage.XXX()

selientMoveTo(): 滚动到第几页和moeTo一样只不过没有动画效果

moveSlideRight() :幻灯片向右滚动

moveSlideLeft(): 幻灯片向左滚动

setAllowScrolling(boolen,[directions]):添加或删除鼠标滚轮控制第一个参数 true false 第二个参数表示方向 up down right left 可以使用多个用逗号隔开
比如我们在设置一个有奖问答页面时，当用户发现前面的页面有答案时，不希望用户滚动回去查看答案可以使用这样的方法
destory(type) 销毁fullpage特效
type不写 fullpage提供的样式 html还在(背景颜色等还在) (all) 样式页面html 全部销毁
reBuild()y
重新定义页面和尺寸，用于ajax请求改变了页面结构之后,重建效果
延迟加载图片或视频

<img data-src="">
<img data-src="img.png>

视频

<video data-src="vedio.webm" type="vedio/webm">
</video>
<video data-src="vedio.mp4" type="vedio/mp4">
</video>

fullpage回调函数（在滚动的过程中触发相应的操作）

afterLoad(anchorLink,index)
滚动到某个Sectio,滚动结束后会触发该回调函数，anchorLink是锚链接的名称，index是序号从1开始

我们可以根据anchorLink和index参数值的判断触发相应的操作

$(document).ready(function(){

 $('#fullpage').fullpage({

   afterLoad: function(anchorLink,index){

   console.log("afterLoad anchorLink"+anchorLink+", index"+index);
  }
});
});

onLeave(index,nextIndex,direction)

当离开一个Section时触发该回调函数接收三个参数

通过return false;可以取消滚动

在afterLoad之前而且只触发一次
afterRend() 当页面生成后会调用的回调函数，或者页面初始化时

afterResize() 当浏览器的窗口大小发生变化时调用

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
当滚动到某个幻灯片的回调函数
afterSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
当离开某个幻灯片的回调函数