文档章节

Fullpage方法函数

heartless01
 heartless01
发布于 2017/08/31 10:56
字数 966
阅读 29
收藏 0
点赞 1
评论 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
支持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
jQuery 全屏滚动插件--fullPage.js

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面、QQ浏览器的官网站等等...

dowebok
2014/01/07
31.3K
1
TinyMCE 3.2.6 发布

该版本增加了一个单词计数插件,用来显示在编辑器中输入的单词数。另外开发了一个新的API文档系统来替换以前使用的WIKI,更便于文档的浏览和导航。还包括很多bug和问题的修正,另外一个最大的...

红薯
2009/08/20
294
0
zepto.fullpage.js插件,想禁用手指上下滑屏的事件,只保留点击全屏滑动的事件的话该怎么做呢?

zepto.fullpage.js插件,想禁用手指上下滑屏的事件,只保留点击全屏滑动的事件的话该怎么做呢? (function($, window, undefined) { var der = (sub > 30 sub < -30) ? sub > 0 ? -1 : 1 : 0......

fashion1993
2015/04/29
2.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
10分钟前
0
0
与女儿谈商业模式 (4):戴尔的成功秘诀

分类:与女儿谈商业模式 | 标签: 戴尔 经济学 陈志武 2007-05-15 10:26阅读(7434)评论(36)   2007年5月《创富志》与“女儿谈商业模式”专栏 (之四)   戴尔的成功秘诀   陈志武   ...

祖冲之
19分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
33分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
今天
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0
Spring Boot 2.0 项目实现自同步AD域账号

在通过Spring Boot的自动化装配功能及JDK自带的LDAP模块,可通过如下几个简单步骤实现业务系统自动同步AD域账号功能。 1. Java自带ldap搜索域账号信息核心代码: try { LdapContext ctx...

B超
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部