API

  1. sectionsColor:['green','orange','red','lime'];
    //设置背景颜色
    可以为每一个section设置background-color属性

  2. controlArrows:
    定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,则幻灯片左右的箭头消失,在移动端上我们可以通过滑动来控制幻灯片

  3. verticalCentered:
    每一页的内容是否垂直居中,默认为true

  4. resize:
    字体是否随着窗口缩放而缩放,默认为false

  5. scrollingSpeed:
    滚动速度,单位为毫秒,默认为700

  6. anchors:
    定义锚链接,默认值是[]。有了锚链接,用户可以快速打开定位到某一页面。
    注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其在IE下,而且定义时不需要加#

  7. lockAnchors:
    是否锁定锚链接,默认为false,若设置为true,则定义的锚链接就没有效果,使用较少

  8. easing:
    定义页面section滚动的动画方式,默认为easeInOutCubic,如果修改则需引入jquery.easings插件,或者jquery ui.

  9. css3:
    是否使用CSS3 transforms来实现滚动效果,默认为true。可提高支持css3的浏览器(如移动设备等的速度),若浏览器不支持css3,则会使用jquery来代替css3实现滚动效果。(传说中的优雅降级)

  10. loopTop:
    滚动到最顶部后是否连续滚动到底部,默认false

  11. loopBottom:
    滚动到最底部后是否连续滚动回顶部,默认false

  12. loopHorizontal:
    横向slide幻灯片是否循环滚动,默认为true

  13. autoScrolling:
    是否使用插件的滚动方式,默认为true,变为false则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动

  14. scrollBar:
    是否包含滚动条,默认为false。设置为true,则出现浏览器自带的滚动条,页面滚动还是按页滚动,但滚动条的默认行为也有效

  15. paddingTop/paddingBottom:
    设置每一个section顶部和底部的padding,默认都是0。一般如果需要设置一个固定在顶部或者底部的菜单、导航、元素等,可以使用这两个配置项。

  16. fixedElements:
    固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动。

  17. keyboardScrolling:
    是否可以使用键盘方向键导航,默认为true。

  18. touchSensitivity:
    在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大滑动越难

  19. continuousVertical:
    是否循环滚动,默认为false。如果为true,则页面会循环滚动,它不会像loopTop和loopBottom那样出现跳动。
    (它和loopTop、loopBottom不兼容,不要同时设置)

  20. animateAnchor:
    锚链接是否可以控制滚动动画,默认为true。若为false,则通过锚链接定位到某个页面显示不再有动画效果。

  21. recordHistory:
    是否记录历史,默认true。可以记录页面滚动的历史,通过浏览器的前进后退来导航。

    如果设置了autoScrolling:false,那么这个配置也将被关闭。

  1. menu:
    绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器。

  2. navigation:
    是否显示导航,默认false。若为true,会显示小圆点作为导航

  3. navigationPosition:
    导航小圆点的位置,可以设置为left或者right。

  4. navigationTooltips:
    导航小圆点的tooltips设置,默认为[],注意按照顺序设置。

  5. showActiveTooltip:
    是否显示当前页面的导航的tooltip信息,默认为false

  6. slidesNavigation:
    是否显示横向幻灯片的导航,默认为false

  7. slidesNavPosition:
    横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom

  8. scrollOverflow:
    内容超过满屏后是否显示滚动条,默认为false.若设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。

  9. sectionSelector:
    section的选择器,默认为.section。

  10. slideSelector:
    slide的选择器,默认为.slide。

方法

  • moveSectionUp():
    向上滚动一页。

  • moveSectionDown():
    向下滚动一页。

  • moveTo(section,slide):
    滚动到第几页,第几个幻灯片,注意:页面是从1开始,而幻灯片是从0开始。

  • silentMoveTo(section,slide):
    滚动到第几页,和moveTo一样,但没有动画效果。

  • moveSlideRight():
    幻灯片向右滚动。

  • moveSlideLeft():
    幻灯片向左滚动。

  • setAutoScrolling(boolean):动态设置autoScrolling

  • setLockAnchors(boolean):动态设置lockAnchors

  • setRecordHistory(boolean):动态设置recordHistory

  • setScrollingSpeed(milliseconds):动态设置scrollingSpeed

  • setAllowScrolling(boolean,[directions]):
    添加或删除鼠标滚轮/滑动控制,第一个参数true为启用,false为禁用,后面的参数为方向,取值包含:all,up,down,left,right,可以使用多个,逗号分隔。

  • destroy(type):
    销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在,如果使用all,则样式、html等全部销毁,页面恢复和不使用fullpage相同的效果。

  • reBuild():
    重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果。

Lazy Loading

  • 图片:
    <img data-src="data:image.png">
  • 视频:
    <video>
<source data-src="video.webm" type="video/webm"/>
<source data-src="video.mp4" type="video/mp4"/>
</video> 用data-src代替src就可以实现延迟加载图片。

回调函数

  • afterLoad(anchorLink,index)
    滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接收 anchorLink 和 index 两个参数, anchorLink 是锚链接的名称, index 是序号,从1开始计算。

    我们可以根据 anchorLink 和 index 参数值的判断,触发相应的事件。

  • onLeave(index,nextIndex,direction)
    在我们离开一个 section 时,会触发一次此回调函数,接收 index 、 nextIndex 和 direction 3个参数:

    index是离开的“页面”的序号,从1开始计算;
    nextIndex是滚动到的目标“页面”的序号,从1开始计算;
    direction判断往上滚动还是往下滚动,值是 up 或 down。

    通过return false;可以取消滚动

  • afterRender()
    页面结构生成后的回调函数,或者说页面初始化完成后的回调函数

  • afterResize()
    浏览器窗口尺寸改编后的回调函数

  • afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
    滚动到某一幻灯片后的回调函数,与afterLoad类似。

  • onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
    在我们离开一个slide时,会触发一次此回调函数,与onLeave类似。

fullPage.js全屏滚动插件API的更多相关文章

  1. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  2. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  3. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  4. FullPage.js全屏滚动插件

    一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...

  5. FullPage.js全屏滚动插件学习总结

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

  6. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  8. FullPage.js全屏滚动插件解说

    1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...

  9. jQuery fullPage.js 全屏滚动

    fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...

随机推荐

  1. js带文字的圆随机运动

    首先是html代码(其实就只有一个画布,记得要把外部js引入写在body底部 <!doctype html> <html> <head> <meta http ...

  2. null 和 undefined 区别

    ---恢复内容开始--- 1.在javascipt中,将一个变量赋值为undefined 或 null ,几乎没什么区别. 2. 在if语句中undefined  和 null 都会被自动转成fals ...

  3. ViewPager+fragment的使用

    如图我在一个继承FragmentActivity的类中嵌套了3个fragment分别能实现3个不同的界面,默认展现第一个,在第一个的fragment中有个ViewPager在ViewPager中嵌套了 ...

  4. Linux 配置 ss

    Linux 配置 Shadowsocks 标签(空格分隔): ss VPS 1.首先安装 sudo pip install shadowsocks 2.然后在指定位置新建shadowsocks.jso ...

  5. May 28th 2017 Week 22nd Sunday

    Behind every beautiful thing, there's some kind of pain. 美丽背后,必有某种努力. No pains, no gains. Maybe we n ...

  6. MovieReview—Ghost in the shell(攻壳机动队95版)

    About Future And is she really human? She’s just so something new A waking lithium flower            ...

  7. Android(java)学习笔记9:JDK5之后的Lock锁的概述和使用

    1. Lock锁的概述: java.util.concurrent.locks,接口Lock 首先Lock是一个接口,Lock实现提供了比使用synchronized方法 和 同步代码块更为广泛的锁定 ...

  8. ettercap_缺少组件问题

    原因:缺少WinPcap组件解决:安装即可

  9. 如何为WebStorm设置SASS的File Watchers?

    Webstorm是一个很牛叉的IDE,现在工作每天都是用它了. 最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SAS ...

  10. 了解Mysql与MariaDb的关系

    MariaDB是MySQL源代码的一个分支,随着Oracle买下Sun,MySQL也落入了关系型数据库王者之手.在意识到Oracle会对MySQL许可做什么后便分离了出来(MySQL先后被Sun.Or ...