fullPage.js中文api 配置参数

选项 类型 默认值 说明
verticalCentered 字符串 true 内容是否垂直居中
resize 布尔值 false 字体是否随着窗口缩放而缩放
slidesColor 函数 设置背景颜色
anchors 数组 定义锚链接
scrollingSpeed 整数 700 滚动速度,单位为毫秒
easing 字符串 easeInQuart 滚动动画方式
menu 布尔值 false 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
navigation 布尔值 false 是否显示项目导航
navigationPosition 字符串 right 项目导航的位置,可选 left 或 right
navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 项目导航的 tip
slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选 top 或 bottom
controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
loopTop 布尔值 false 滚动到最顶部后是否滚底部
loopHorizontal 布尔值 true 左右滑块是否循环滑动
autoScrolling 布尔值 true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条
css3 布尔值 false 是否使用 CSS3 transforms 滚动
paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离
fixedElements 字符串  
normalScrollElements    
keyboardScrolling 布尔值 true 是否使用键盘方向键导航
touchSensitivity 整数 5  
continuousVertical 布尔值 false 是否循环滚动,与 loopTop 及 loopBottom 不兼容
animateAnchor 布尔值 true  
normalScrollElementTouchThreshold 整数 5  

fullPage.js中文api 方法

名称 说明
moveSectionUp() 向上滚动
moveSectionDown() 向下滚动
moveTo(section, slide) 滚动到
moveSlideRight() slide 向右滚动
moveSlideLeft() slide 向左滚动
setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling() 添加或删除键盘方向键控制
setScrollingSpeed() 定义以毫秒为单位的滚动速度

fullPage.js中文api 回调函数

名称 说明
afterLoad 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
onLeave 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:
index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算;
direction 判断往上滚动还是往下滚动,值是 up 或 down。
afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave 某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数

本文链接:jquery.fullPage.js全屏滚动插件教程演示http://www.51xuediannao.com/js/jquery/jquery.fullPage.html

<!-- fullpage -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.css">

<!--
        先引JQ再引fullpageJS easingsJS会让动画过度效果更好,平滑~
-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.min.js"></script>

[转载]fullPage.js中文api 配置参数~的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  3. jQuery-全屏滚动插件【fullPage.js】API 使用方法总结

    jQuery-全屏滚动插件[fullPage.js]API 使用方法总结   jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.c ...

  4. FullPage.js中文帮助文档API

    fullPage.js的方法: 1. moveSectionUp() 功能:向上滚动一页. 2. moveSectionDown() 功能:向下滚动一页. 3. moveTo(section, sli ...

  5. Swiper.js 中文API手册

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  6. 转 Datatables中文API——基本参数

    鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我 ...

  7. 【转载】Leaflet 中文api

    L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with ...

  8. fullpage.js与animate.css搭配使用

    jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage   官网 https://github.com/alvarotrig ...

  9. fullpage.js的easing参数怎样配置自定义动画

    首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...

随机推荐

  1. ODBC、OLE DB、 ADO的区别

    转自:http://blog.csdn.net/yinjingjing198808/article/details/7665577 一.ODBC ODBC的由来 1992年Microsoft和Syba ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统-分配角色给用户

    系列目录 由于之前做了将权限赋给角色,还需要做将角色组赋给用户,和将用户赋给角色组,一个用户可以拥有多个角色组,一个角色组包含多个用户,打开模块管理,添加一个分配的操作码 并在 角色权限设置授权给他 ...

  3. 通过IEnumerable和IDisposable实现可暂停和取消的任务队列

    一般来说,软件中总会有一些长时间的操作,这类操作包括下载文件,转储数据库,或者处理复杂的运算. 一种处理做法是,在主界面上提示正在操作中,有进度条,其他部分不可用.这里带来很大的问题, 使用者不知道到 ...

  4. nginx源码分析之hash的实现

    nginx实现了自己的hash数据结构,正如数据结构中讲述的那样,nginx用开放链表法解决冲突,不过不同的是一旦一个hash表被初始化后就不会被修改,即插入和删除,只进行查询操作,所以nginx通过 ...

  5. 【Oracle 集群】Oracle 11G RAC教程之集群安装(七)

    Oracle 11G RAC集群安装(七) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总. ...

  6. 读书笔记--SQL必知必会01--了解SQL

    1.1 数据库基础 数据库(datebase) 保存有组织的数据的容器(通常是一个文件或一组文件),是一个以某种有组织的方式存储的数据集合. 数据库管理系统(DBMS,Data Base Manage ...

  7. .Net语言 APP开发平台——Smobiler学习日志:如何实现快速跳转网页

    Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.跳转网页代码(Button的Click事件) Private Sub Button1_ ...

  8. Navisworks 提供了.NET, COM和NwCreate 三种API

    Navisworks 提供了.NET, COM和NwCreate 三种API.而通常我们说Navisworks API其实指的只是COM或.NET,因为NwCreate的功能比较特殊.待我一一道来: ...

  9. JavaScript原型OOP——你上车了吗?

    .title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...

  10. 自己动手写计算器v1.0

    今天突发奇想,想着看了还几个设计模式了,倒不如写点东西来实践它们.发现计算器这种就比较合适,打算随着设计模式的学习,会对计算器不断的做改进. 包括功能的增加和算法的改进.初学者难免犯错,希望大家不吝指 ...