文档章节

Fullpage方法函数

heartless01
 heartless01
发布于 2017/08/31 10:56
字数 966
阅读 37
收藏 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

共有 人打赏支持
heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
06-移动端开发教程-fullpage框架

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

aicoder
01/03
0
0
Fullpage.js全屏滚动常用配置项、方法及回调函数

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

Neuro_annie
2017/05/12
0
0
jQuery全屏滚动插件FullPage.js中文帮助文档API

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

Jack088
2016/08/08
211
0
fullpage下的navigationColor设置后没有反应。

文件来源github https://github.com/alvarotrigo/fullPage.js html引入 代码如下: $(function(){ $('#fullpage').fu...

别慌
2015/04/27
1K
1
VUE 引入 fullpage 失败

1.0 全局引入 jq 2.0 组建因引入 fullpage.js fullpage.css 3.0 $('#fullpage').fullpage() 报错 is not a function 为何...

Z_momo
2017/07/27
24
0

没有更多内容

加载失败,请刷新页面

加载更多

权限框架Shiro学习之表结构设计

权限框架Shiro学习之表结构设计 Shiro是一款优秀的开源安全框架,学习Shiro大家可以参考张开涛老师的博客:跟我学Shiro,当然也可参考我之前的笔记:Shiro实现身份认证、Shiro实现授权。 在学...

TyCoding
24分钟前
1
0
find命令和文件名后缀

9月18日任务 2.23/2.24/2.25 find命令 2.26 文件名后缀 which which 搜索可执行文件,必须在PATH环境变量目录中!!否则无法搜到! [root@centos7 ~]# which lsalias ls='ls --color=auto'...

robertt15
27分钟前
1
0
阿里Java程序员必备的Intellij IDEA 插件

善用Intellij插件可大幅提升我们的效率,以下是我用过不错的Intellij插件,分享给大家希望能帮到大家。 1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 2. lom...

我是你大哥
37分钟前
1
0
为什么Java大神,都在看Spring Boot和Spring Cloud的书?

如果你是一名Java开发人员,并且最近正打算学习Spring Boot和Spring Cloud框架并寻找一些关于它们的最好的书籍,那么,你今天就来对地方了。 本文,我们将讨论一些学习Spring Boot和Spring ...

Java小铺
55分钟前
12
0
springboot logback日志配置

springboot 如果不使用外部tomcat的话,日志是需要自己配置的,不然的话就只有控制台的日志,但是日志又是我们在项目上了生产环境,出问题时,检查问题的唯一途径,所以我们要配置详细的日志...

曾大大胖
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部