[转载]fullPage.js中文api 配置参数~
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 配置参数~的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
jQuery-全屏滚动插件[fullPage.js]API 使用方法总结 jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.c ...
- FullPage.js中文帮助文档API
fullPage.js的方法: 1. moveSectionUp() 功能:向上滚动一页. 2. moveSectionDown() 功能:向下滚动一页. 3. moveTo(section, sli ...
- Swiper.js 中文API手册
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- 转 Datatables中文API——基本参数
鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我 ...
- 【转载】Leaflet 中文api
L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with ...
- fullpage.js与animate.css搭配使用
jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage 官网 https://github.com/alvarotrig ...
- fullpage.js的easing参数怎样配置自定义动画
首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...
随机推荐
- android使用ImageLoader实现图片缓存(安卓开发必备)
相信大家在学习以及实际开发中基本都会与网络数据打交道,而这其中一个非常影响用户体验的就是图片的缓存了,若是没有弄好图片缓存,用户体验会大大下降,总会出现卡顿情况,而这个问题尤其容易出现在ListVie ...
- 搭建了个人的github.io博客
地址:http://www.shutu.tech 说明: 基于github + hexo简易搭建的个人博客,用于收藏经典博文及技术文章,也会用于个人的技术成长记录.我是看到这篇文章搭建的:http:/ ...
- linux终端指令总结
一直没机会进行linux指令的系统学习,但是工作中总能遇到通过指令操作文件或数据库的情况,总不能一味地依赖后端开发者的帮忙.上任领导说过,要是在同一个地方跌倒,那么你就是傻子.我可不想成为傻子,so, ...
- STM32 奇偶校验配置
void MX_USART2_UART_Init(void){ huart2.Instance = USART2; huart2.Init.BaudRate = 9600; huart2.Init.W ...
- Redis高可用集群方案——哨兵
本篇文章版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文系列地址http://www.cnblogs.com/tdws/tag/NoSql/ 本人之前有篇文章,讲到了redis主从复制,读写分 ...
- mongo DB for C#
(1)Download the MongoDB C#驱动. http://www.nuget.org/packages/mongocsharpdriver/. (2) Add Reference to ...
- C++四种类型转换方式。
类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少的缺点,有的时候用c风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
- 笔记:解决VS2015 不能加载.edmx 的解决方案
1. 首先你要安装 VS2015镜像中的packages->EFTools文件(最后拷贝出来,因为发现直接运行其下的EFTools.msi文件安装会有问题),然后安装里面的EFTools.msi ...
- MySQL实现两张表数据的同步
有两张表A和B,要求往A里面插入一条记录的同时要向B里面也插入一条记录,向B里面插入一条记录的同时也向A插入一条记录.两张表的结构不同,需要将其中几个字段对应起来.可以用下面的触发器实现. 表A的触发 ...
- Servlet3.0的注解
1.@WebListener注解 表示的就是我们之前的在xml中配置的 <listener> <listener-class>ListenerClass</listene ...