方法函数
前面介绍了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>