Alvaro Trigo的fullPage插件。快速简单地创建全屏页面
Posted
tags:
中文标题：Alvaro Trigo的fullPage插件。快速简单地创建全屏页面 原文标题： 项目评级：Star:34500 Fork:7400 下载地址：https://github.com/alvarotrigo/fullPage.js 详情介绍完整页面.js
英语|
西班牙|
法国|
地址：|
中文 |
한국어 |
巴西葡萄牙语
可用于Vue、React和Angular。
|由@imac2创建
一个简单易用的库，可以创建全屏滚动网站（也称为单页网站或单页网站），并在网站的各个部分添加横向滑块。
介绍
建议非常受欢迎，不仅适用于功能请求，也适用于编码风格的改进。
让我们把这里打造成一个伟大的图书馆，让人们的生活更轻松！
兼容性
fullPage.js在所有现代浏览器和IE 11上都能充分发挥功能。如果您需要支持IE<；11考虑使用fullPage.js v3。
它还为手机、平板电脑和触摸屏电脑提供触摸支持。
特别感谢Browserstack对fullpage.js的支持。
许可证
商业许可证
如果您想使用fullPage开发非开源网站、主题、项目和应用程序，商业许可证是合适的许可证。使用此选项，您的源代码将保持专有。这意味着，您不必将整个应用程序源代码更改为开源许可证。[购买全页商业许可证]
开源许可证
如果您在与GNU GPL许可证v3兼容的许可证下创建开源应用程序，则可以根据GPLv3的条款使用fullPage。
您必须提供一个显著的通知，说明fullPage.js正在使用中。JavaScript和CSS文件中的信用评论应保持完整（即使在组合或缩小后）。
阅读有关fullPage许可证的更多信息。
用法
正如您在示例文件中看到的那样，您需要包括：
可选地，当使用css3:false时，如果您想使用除库中包含的缓解效果（easeInOutCubic）之外的其他缓解效果，您可以添加缓解文件。
使用bower或npm安装
如果您愿意，也可以选择使用bower或npm安装fullPage.js：
终端：
包括文件：
使用Webpack、Browserify还是Require.js？检查如何将fullPage.js与模块加载程序一起使用。
CDN的可选使用
如果您更喜欢使用CDN来加载所需的文件，fullPage.js位于CDNJS中：
https://cdnjs.com/libraries/fullPage.js
必需的HTML结构
在HTML代码的第一行使用强制性的HTML DOCTYPE声明来启动HTML文档。否则，您可能会遇到截面高度问题。所提供的示例使用HTML 5 doctype<!DOCTYPE html>。
每个部分都将定义一个包含section类的元素。
默认情况下，活动部分将是第一个部分，作为主页。
型材应放置在包装内（在这种情况下<div id="fullpage">）。包装器不能是body的元素。
如果你想定义一个不同的起点，而不是一个节的第一节或第一张幻灯片，只需将类active添加到你想首先加载的节和幻灯片中。
为了在一个部分中创建横向滑块，默认情况下，每个幻灯片都会定义一个包含slide类的元素：
您可以在simple.html文件中看到HTML结构的完整工作示例。
初始化
使用Vanilla Javascript初始化
您所需要做的就是在结束</body>标记之前调用fullPage.js。
使用jQuery初始化
如果你愿意，你可以使用fullpage.js作为jQuery插件！
函数和方法仍然可以用jQuery的方式调用，如fullPage.js v2.X。
Vanilla JS示例，包含所有选项
设置了所有选项的更复杂的初始化可能如下所示：
创建指向节或幻灯片的链接
如果您使用的fullPage.js带有小节的锚定链接（在每个小节中使用anchors选项或data-anchor属性），那么您也可以使用锚定链接直接导航到小节内的某个幻灯片。
这将是一个带有锚点的链接示例：https://alvarotrigo.com/fullPage/#secondPage/2（这是您手动访问该部分/幻灯片后将看到的URL）
请注意，URL的最后一部分以#secondPage/2结束。
具有以下初始化：
URL#secondPage/2末尾的锚点分别定义了目的地的部分和幻灯片。在上一个URL中，目的地部分将是用锚secondPage定义的部分，幻灯片将是第二张幻灯片，因为我们使用的是索引2。（一个部分的第一张幻灯片的索引为0，因为从技术上讲，它是一个部分）。
如果我们在HTML标记上使用data-anchor属性，我们可以为幻灯片使用自定义锚点，而不是索引，如下所示：
在最后一种情况下，我们将使用的URL将#secondPage/slide3，这相当于
我们之前的#secondPage/2。
请注意，如果没有提供anchors数组，也可以使用data-anchor属性以相同的方式定义截面锚。
小心！data-anchor标签的值不能与网站上的任何ID元素（或IE的NAME元素）相同。
创建更小或更大的部分
Demo fullPage.js提供了一种从其部分和幻灯片中删除全高限制的方法。可以创建高度小于或大于视口的剖面。这是页脚的理想选择。
重要的是要意识到，让你的所有部分都使用这个功能是没有意义的。如果网站的初始加载中有多个部分，fullPage.js根本不会滚动查看下一个部分，因为它已经在视口中了。
要创建较小的部分，只需在要应用的部分中使用类fp-auto-height。然后它将采用您的部分/幻灯片内容定义的高度。
响应式自动高度部分
演示使用fp-auto-height-responsive类可以应用响应式自动高度。这样，在启动响应模式之前，部分将是全屏的。然后，它们将采用内容所需的大小，该大小可以大于或小于视口。
fullpage.js添加的状态类
Fullpage.js在不同的元素中添加了多个类，以记录网站的状态：
懒惰的加载
Demo-fullPage.js提供了一种延迟加载图像、视频和音频元素的方法，这样它们就不会减慢网站的加载速度或不必要地浪费数据传输。
当使用延迟加载时，所有这些元素只有在视口中输入时才会被加载。
要启用延迟加载，您只需将src属性更改为data-src，如下所示：
如果您已经使用了另一个使用data-src的延迟加载解决方案，您可以通过设置lazyLoading: false选项来禁用fullPage.js延迟加载。
自动播放/暂停嵌入式媒体
演示注意：根据操作系统和浏览器的不同，自动播放功能可能无法在某些移动设备上运行（即iOS版本<；10.0上的Safari）。
分段播放/幻灯片加载：
对视频或音频使用属性autoplay，或对youtube iframes使用参数autoplay=1，将导致媒体元素在页面加载时播放。
为了在剖面/幻灯片加载上播放，请使用属性data-autoplay。例如：
休假时暂停
嵌入式HTML5<video>/<audio>和Youtube iframe在您离开部分或幻灯片时会自动暂停。这可以通过使用属性data-keepplaying来禁用。例如：
使用扩展
fullpage.js提供了一组扩展，可以用来增强其默认功能。所有这些都列为fullpage.js选项。
扩展要求您使用dist文件夹中的缩小文件fullpage.extensions.min.js，而不是通常的fullPage.js文件（fullpage.js或fullpage.min.js）。
一旦您获得了扩展文件，您将需要在fullPage之前添加它。例如，如果我想使用Continuous Horizontal扩展名，我必须包括扩展名文件，然后是fullPage文件的扩展名版本。
每个扩展都需要一个激活密钥和一个许可证密钥。点击此处查看更多详细信息。
然后，您将能够按照选项中的说明使用和配置它们。
选项
方法
你可以在这里看到他们的行动
获取活动分区（）
Demo获取一个包含活动节及其属性的对象（类型为Section）。
获取活动幻灯片（）
Demo获取一个包含活动幻灯片及其属性的对象（幻灯片类型）。
获取滚动Y（）&；获取滚动X
DemogetScrollY获取fullPage包装器的Y位置。getScrollX获取活动水平滑动的X位置。
移动分区向上（）
演示向上滚动一节：
moveSectionDown（）
演示向下滚动一节：
移动到（分区，幻灯片）
演示将页面滚动到给定的部分和幻灯片。第一部分的索引为1，而第一张幻灯片（默认为可见幻灯片）的索引为0。
silentMoveTo（节，幻灯片）
演示
与moveTo完全相同，但在这种情况下，它在没有动画的情况下执行滚动。直接跳转到目的地。
向右移动幻灯片（）
演示
将当前节的水平滑块滚动到下一张幻灯片：
向左移动幻灯片（）
演示
将当前节的水平滑块滚动到上一张幻灯片：
设置自动滚动（布尔值）
演示实时设置滚动配置。
定义页面滚动的行为方式。如果设置为true，则使用“自动”滚动，否则使用“手动”滚动
网站的“ual”或“normal”滚动。
setFitToSection（布尔值）
演示
设置选项fitToSection的值，以确定是否在屏幕中适合该部分。
fitToSection（）
演示
滚动到最近的活动区域，使其适合视口。
setLockAnchors（布尔值）
演示
设置选项lockAnchors的值，以确定锚点是否会在URL中产生任何影响。
setAllowScrolling（布尔值，[方向]）
演示通过使用鼠标滚轮/触控板或触摸手势（默认情况下处于活动状态）添加或删除滚动部分/幻灯片的可能性。请注意，这不会禁用键盘滚动。你
需要使用setKeyboardScrolling。
setKeyboardScrolling（布尔值，[方向]）
演示通过使用键盘（默认情况下处于活动状态）添加或删除滚动部分的可能性。
setRecordHistory（布尔值）
Demo定义是否记录URL中每个哈希更改的历史记录。
设置滚动速度（毫秒）
演示以毫秒为单位定义滚动速度。
销毁（类型）
Demo销毁插件事件以及可选的HTML标记和样式。
非常适合在使用AJAX加载内容时使用。
重建（）
更新DOM结构以适应新窗口大小或其内容。
非常适合与AJAX调用或网站DOM结构的外部更改结合使用，特别是在使用scrollOverflow:true时。
setResponsive（布尔值）
演示设置页面的响应模式。当设置为true时，自动滚动将关闭，结果将与responsiveWidth或responsiveHeight选项被触发时的结果完全相同。
响应幻灯片至章节（）
fullpage.js的扩展。需要fullpage.js>；=3.0.1.
将水平幻灯片转换为垂直部分。
响应幻灯片.to幻灯片（）
fullpage.js的扩展。需要fullpage.js>；=3.0.1.
将原始幻灯片（现在已转换为垂直部分）再次转换为水平幻灯片。
回调
演示您可以在这里看到他们的行动。
一些回调，如onLeave，将包含Object类型的参数，这些参数包含以下属性：
后负荷（origin、destination、direction、trigger）
在滚动结束后，一旦加载了部分，就会触发Demo回调。
参数：
例子：
onLeave（origin、destination、direction、trigger）
Demo一旦用户离开一个节，在转换到新节的过程中，就会触发此回调。
返回false将在移动发生之前取消移动。
参数：
例子：
离开前（origin、destination、direction、trigger）
Demo这个回调是在离开小节之前启动的，就在转换发生之前。
您可以使用此回调，通过返回false来阻止和取消滚动。
参数：
例子：
渲染后（）
Demo这个回调是在生成页面结构之后立即触发的。这是您想要用来初始化其他插件或激发任何需要文档准备好的代码的回调（因为这个插件修改DOM以创建结果结构）。有关更多信息，请参阅常见问题解答。
例子：
afterResize（width，height）
演示此回调是在调整浏览器窗口大小后启动的。就在调整分区大小之后。
参数：
例子：
重建后（）
Demo此回调是在通过调用fullpage_api.reBuild()手动重新构建fullpage.js后触发的。
例子：
后响应（isResponsive）
演示此回调是在fullpage.js从正常模式更改为响应模式或从响应模式更改为正常模式后触发的。
参数：
例子：
滑动负载后（section、origin、destination、direction、trigger）
在滚动结束后，一旦加载了某个部分的幻灯片，就会触发Demo回调。
参数：
例子：
onSlideLeave（section、origin、destination、direction、trigger）
演示一旦用户离开一张幻灯片转到另一张幻灯片，在转换到新幻灯片时，就会触发此回调。
返回false将在移动发生之前取消移动。
参数：
例子：
在移动发生之前取消移动
您可以通过在onSlideLeave回调中返回false来取消移动。与用onLeave取消移动时相同。
onScrollOverflow（section、slide、true、direction）
Demo当使用fullPage.js选项＜code＞scrollOverflow时，在可滚动部分内滚动时会触发此回调：
true。
参数：
例子：
报告问题
为fullpage.js贡献力量
请参阅对fullpage.js的贡献
变更日志
要查看最近更改的列表，请参见“发布”部分。
生成任务
想要构建fullpage.js分发文件吗？请参阅生成任务
资源
谁在使用fullPage.js
捐赠
捐款将非常受欢迎：）
发起人
成为赞助商，并在Github上的README上获得您的徽标，并附上您网站的链接。[成为赞助商][成为赞助商]
页面打桩插件Alvaro Trigo。创建一堆滚动的部分。http://alvarotrigo.com/pagePiling/