文档章节

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

Jack088
 Jack088
发布于 2016/08/08 16:25
字数 1137
阅读 238
收藏 0

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天就给大家说说fullPage.js的使用方法和设置。

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

简介

fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站。

fullpage开源中文文档

主要功能

支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 兼容性

fullPage.js 支持 IE8+ 及其他现代浏览器。

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.fullPage.js"></script> 2、HTML

<div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏</div> <div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div> </div> <div class="section">第四屏</div> </div> 3、JavaScript

$(function(){ $('#fullpage').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'], anchors: ['page1', 'page2', 'page3', 'page4'], 'navigation': true, 'navigationPosition': 'right', 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'] }) }) 经测试,最好至少有 anchors 这个参数,否则在火狐浏览器中,第一次滚动会直接滚到底部。

点击这里查看上面代码的示例:http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/

配置

1、选项

选项 类型 默认值 说明 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 2、方法

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

名称 说明 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个参数 如何获取

官方网站 | 下载地址 | fullPage.js GitHub 地址:https://github.com/alvarotrigo/fullPage.js

本文转载自:http://www.uedsc.com/fullpage.html

共有 人打赏支持
Jack088
粉丝 42
博文 487
码字总数 70102
作品 0
程序员
私信 提问
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.4K
10
分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

日期:2012/02/06 来源:GBin1.com 在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。 这个插件基于F...

gbin1
2012/02/07
0
0
2011年度最佳 jQuery 插件发布

近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全球的...

红薯
2011/11/25
6K
16
使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示 本地下载 今 天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创 建的这个留言...

gbin1
2012/02/15
844
2

没有更多内容

加载失败,请刷新页面

加载更多

VI 编辑器快捷键

vi编辑器工作模式 命令模式 输入模式 末行模式 命令模式 光标移动键:h:左 j:下 k:上 l:右 7h:光标向左7个字符,同理5j:光标向下移动5个字符 w :移动到下一个单词的词首 2w : 向后跳转2个单...

ZeroneLove
33分钟前
0
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
今天
4
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
今天
2
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
今天
2
0
java基础的几个算法

一般对于排序算法我们通常考虑: 是否稳定(相同值的两个数位置是否会变) 和 时间复杂度(算法执行次数的规模量级)。至于说空间复杂度(算法在运行过程中临时占用存储空间大小的量度)其实...

noob_fly
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部