文档章节

Fullpage方法函数

heartless01
 heartless01
发布于 2017/08/31 10:56
字数 966
阅读 52
收藏 0

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>

 

 

 

 

 

 

 

 

 

 

 

 

本文转载自:http://www.qdfuns.com/notes/19736/3e9a8c8261f98de8ba04712ab592b442.html

共有 人打赏支持
上一篇: FullPage.js 帮助API
下一篇: 前端框架
heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
私信 提问
Fullpage.js全屏滚动常用配置项、方法及回调函数

Fullpage.js全屏滚动 主要功能: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚...

Neuro_annie
2017/05/12
0
0
06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比...

aicoder
01/03
0
0
jQuery全屏滚动插件FullPage.js中文帮助文档API

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很...

Jack088
2016/08/08
211
0
支持iframe自适应,并全屏iframe

support iframe responsive and fullscreen iframe(支持iframe自适应,并全屏iframe) 1.use jquery iframe resizer(it will autoresize iframe when content change) and more fullscreen a ......

长沙大东家
2016/01/14
170
0
移动端全屏滚动插件--zepto.fullpage

zepto.fullpage 是专注于移动端的 fullPage.js,依赖 Zepto。 功能概述 可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。 兼容性 Ios4+ Andriod2.3+(未全部覆盖) 快...

颜海镜
2015/02/11
9.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
0
0
Win10 下安装Win7双系统

很多人买了预装64位Win8/8.1的电脑后想重装(或者再安装一个)Win7系统,但是折腾半天发现以前的方法根本不奏效。这是因为预装Win8/8.1的电脑统一采用了UEFI+GPT引导模式,传统的BIOS(Legacy...

yaly
昨天
1
0

中国龙-扬科
昨天
1
0
假若明天来临——《AI.未来》读后感3900字

假若明天来临——《AI.未来》读后感3900字: 你有没有想过,如果有一天你被确诊为癌症患者,你会做些什么?你有没有想过,在你百年之后,你希望你的墓碑上刻写着什么内容? 在我翻开李开复老...

原创小博客
昨天
1
0
tomcat线程模型

Connector结构 BIO模式 NIO模式

grace_233
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部