Fullpage方法函数

2019独角兽企业重金招聘Python工程师标准>>>

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);
[b][size=4]silentMoveTo(section, slide)[/size][/b]

这个函数的用法和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>

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/1428820/blog/1526754