方法函数

优质
小牛编辑
131浏览
2023-12-01

前面介绍了Fullpage的配置参数,接下来为大家介绍一些Fullpage中的方法函数,这些函数是在插件初始化外调用,不同于回调函数,且不受参数的影响。

moveSectionUp()

设置section向上滚动

$.fn.fullpage.moveSectionUp();

moveSectionDown()

设置section向下滚动

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

设置屏幕滚动到某个section或者slide,两个参数都是某个内容块的索引值或者是锚文本,默认情况下slide的索引被设置为0。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
 
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
 
//Which is the same as
$.fn.fullpage.moveTo(3);

silentMoveTo(section, slide)

这个函数的用法和MoveTo方法完全一样,只是MoveTo在切换的时候有动画效果,而silentMoveTo方法在切换的时候没有动画效果,直接跳转到对应的section中。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);

moveSlideRight()

设置幻灯片向右滑动,将下一个幻灯片显示在当前的屏幕中。

$.fn.fullpage.moveSlideRight();

moveSlideLeft()

设置幻灯片向左滑动,将上一个幻灯片显示在当前的屏幕中。

$.fn.fullpage.moveSlideLeft();

setAutoScrolling(boolean)

可以实时的控制页面滚动的方式,可选的参数false/true。

  • 如果参数被设置为true,所有的section将自动滚动。
  • 如果参数被设置为false,所有的section将不会自动滚动,需要用户手动或者使用浏览器的滑条滚动网页。

注意,scrollOverflow参数如果设置为true,它可能很难滚动鼠标滚轮或触摸板当部分滚动。

$.fn.fullpage.setAutoScrolling(false);

setFitToSection(boolean)

该函数设置选项fitToSection确定是否自适应section在屏幕上。

$.fn.fullpage.setFitToSection(false);

setLockAnchors(boolean)

设置选项lockAnchors确定将锚文本锁定到URL中。

$.fn.fullpage.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自动绑定的鼠标滑轮和移动触摸事件,不过用户任然可以通过键盘和点击快速导航的方式切换section/slide。要取消键盘事件你应该使用setKeyboardScrolling方法。

  • directions,可选参数,可以设置的值:all, up, down, left, right或者设置组合的参数,例如down, right,他设置的两个方向上将禁止或者激活滚动。
//disabling scrolling
$.fn.fullpage.setAllowScrolling(false);
 
//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');
 
//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

添加或者禁止键盘对section/slide的控制,这个事件是默认绑定的。

  • directions,可选参数,可以设置的值:all, up, down, left, right或者设置组合的参数,例如down, right,他设置的两个方向上将禁止或者激活键盘的滚动。
//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);
 
//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');
 
//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

定义是否为每个URL的变更纪录到浏览器中的历史记录中。

$.fn.fullpage.setRecordHistory(false);

setScrollingSpeed(milliseconds)

定义每个section/slide滚动的时间,默认的时间单位为毫秒(ms)。

$.fn.fullpage.setScrollingSpeed(700);

destroy(type)

移除Fullpage的事件和添加的HTML/CSS样式风格,理想的使用在使用Ajax加载内容。

  • type:可以被设置为空字符,或者all,如果一旦执行,通过Fullpage添加的HTML/CSS样式和代码都将会被移除,将显示没有使用Fullpage的样式,一个使用过任何插件进行修改。
//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
 
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

reBuild()

更新DOM结构以适应新的窗口大小或其内容。理想的使用与Ajax调用或外部网站的DOM结构的变化组合。

$.fn.fullpage.reBuild();

资源延时加载

fullpage.js提供了一种懒加载图像,视频和音频元素,所以他们不会放慢您的网站加载或不必要的浪费数据传输。使用延迟加载时,所有这些元素只会加载时进入视口。启用延迟加载,所有你需要做的是改变你的src属性的data-src如下图所示:

<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>