fullPage.js 是一个用于创建全屏滚动网站的JavaScript库，支持多种浏览器，包括旧版。它提供了全屏滚动、响应式设计、触摸支持、自动播放/暂停媒体等功能。初始化fullPage.js需要包含jQuery、js和css文件，然后通过$(document).ready调用。可设置选项如滚动速度、锚点、自动滚动等，还有回调函数如afterLoad、onLeave等。此外，fullPage.js还支持延迟加载和创建链接到各个部分或幻灯片。
fullPage.js
一个简单易用的，用以创建全屏滚动网站（也称为单页网站）。它允许创建全屏滚动页面，以及在页面的部分内添加一些slide。
fullpage.js全部功能在所有现代浏览器，还有一些老旧的，如Internet Explorer 8, 9，Opera 12这样的，等等。fullpage.js为浏览器提供CSS3的支持，使它成为兼容老旧浏览器的理想选择。此外它还为手机、平板电脑和触摸屏电脑提供触摸支持。
Usage （使用方法）
（你的页面文件中） 需要包括：
- jQuery库。（最低1.6.0）
- JavaScript文件
jquery.fullPage.js（或其最小化版本jquery.fullPage.min.js） - 的css文件
jquery.fullPage.css
Optionally, when using
css3:false, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library (linearandswing) or the one included by default in fullPage.js (easeInOutCubic).
可选地，当使用时css3:false，您可以添加jQuery UI库，以防您想要使用除jQuery库（linear和swing）中包含的其他缓动效果或默认情况下在fullPage.js（easeInOutCubic）中包含的其他效果）。
Install using bower or npm
Optionally, you can install fullPage.js with bower or npm if you prefer:
Terminal:
// With bower bower install fullpage.js // With npm npm install fullpage.js
Including files:
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". 以下行是可选的。只有使用选项css3：false并且要使用其他缓动效果而不是“线性”， “swing”或“easeInOutCubic”时才需要--> <script src="vendors/jquery.easings.min.js"></script> <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` 以下行仅在使用选项“scrollOverflow：true的 情况下必须的，不然会报错--> <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script>Optional use of CDN
If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS: https://cdnjs.com/libraries/fullPage.js
Required HTML structure（必须的HTML 结构）
每个单独的，要被展示的部分要用 class='seciton' 包裹。默认情况下，第一个class='seciton' 的div是第一个被展示的。
class='seciton' 部分应该放在<div id="fullpage">下,不能是<body>。
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
如果你想定义一个不同的起始点，而不是第一个class='seciton' 的div是第一个被展示，只需将class='active' 类添加到该部分，再次载入页面。
<div class="section active">Some section</div>为了在一个class='seciton' 内创建一个可以左右滑动的slide，每个class='seciton' 在默认情况下都会定义一个包含slide的class：
<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>
这可以在HTML中看到一个完整的HTML结构示例，不过需要手动的配置必要文件。demoPage.html
Initialization（初始化）
将调用 fullPage.js 放在 $(document).ready 里面
$(document).ready(function() {
$('#fullpage').fullpage();
});
//或者
$(function(){
$('#fullpage').fullpage();
})
所有选项集的更复杂的初始化可能如下所示：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation 导航
menu: '#menu',//导航ID
lockAnchors: false,
anchors:['firstPage', 'secondPage'],//锚点
navigation: false,//导航
navigationPosition: 'right',//导航点定位
navigationTooltips: ['firstSlide', 'secondSlide'],//鼠标悬停时导航点的描述
showActiveTooltip: false,//是否固定显示导航点描述
slidesNavigation: false,//slide 导航
slidesNavPosition: 'bottom',
//Scrolling 滚动
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
Creating links to sections or slides （创建链接）
如果您正在使用带有锚链接的部分的 fullPage.js （使用每个部分中的anchors选项或自定义属性data-anchor），那么您将能够使用锚点链接直接导航到部分内的某个幻灯片。
This would be an example of a link with an anchor: http://alvarotrigo.com/fullPage/#secondPage/2 (在URL #secondPage/2定义了section 锚点(#secondPage)和slide 锚点(2)。)(which is the URL you will see once you access to that section/slide manually) Notice the last part of the URL ends in #secondPage/2.
这将是与锚的链接的示例：http : //alvarotrigo.com/fullPage/#secondPage/2（这是您手动访问该部分/幻灯片后将看到的URL）注意最后一部分网址以#secondPage/2。
初始化锚点如下：
$(document).ready(function() {
$('#fullpage').fullpage({
anchors:['firstPage', 'secondPage', 'thirdPage']
});
});
如果我们像这样使用HTML标记上的属性数据锚，我们可以使用自定义锚来代替幻灯片：
<div class="section"> <div class="slide" data-anchor="slide1"> Slide 1 </div> <div class="slide" data-anchor="slide2"> Slide 2 </div> <div class="slide" data-anchor="slide3"> Slide 3 </div> <div class="slide" data-anchor="slide4"> Slide 4 </div> </div>
在这种情况下，我们将使用的URL将#secondPage/slide3是相当于我们以前的URL #secondPage/2。
如果没有提供锚数组(fullpage初始化时传入的锚点初始化数组：anchors:['firstPage', 'secondPage'],//锚点)，也可以使用数据锚自定义属性以同样的方式定义节锚。
小心!自定义属性锚标记（data-anchor）不能与站点上的任何ID元素（IE的NAME元素）具有相同的值。
Creating smaller or bigger sections(创建更小或更大的sections)
Demo fullPage.js 提供了一种可以移除section 和slide 全屏高度的方法。可以创建高度小于或大于视口的部分,这用来做footer不错。
要创建较小或较大的的部分，只需要在需要应用的 section 上加上 fp-auto-height 类，它会显示自定义高度。（本人建议还是不要超过一屏的高度，会显示不全。）
<div class="section">Whole viewport</div> <div class="section fp-auto-height">Auto height</div>
fp-auto-height CSS样式如下：
.fp-auto-height.fp-section{
height: auto !important;
}Responsive auto height sections（响应自动高度部分）
可以通过使用该类来应用响应自动高度fp-auto-height-responsive。这种方式部分将是完整的高度，直到响应模式被触发。
State classes added by fullpage.js（通过fullpage.js动态添加CLASS类）
active添加当前可见部分并滑动。active被添加到当前菜单元素（如果使用该menu选项）。- 表单的类
fp-viewing-SECTION-SLIDE被添加到body站点的元素中。（例如：fp-viewing-secondPage-0）的SECTION和SLIDE部件将是锚当前节和滑动的（或索引如果没有提供锚）。 fp-responsivebody当进入响应模式时被添加到元素fp-enabledhtml当启用fullpage.js时，它被添加到元素中。（当销毁时被移除）。fp-destroyed当fullPage.js被销毁时，它被添加到fullpage.js容器中。fp-enabledhtml一旦这个文件被激活，就被添加到该元素中。
Lazy Loading（懒加载）
DEMO fullPage.js提供了一种延迟加载图像，视频和音频元素的方式，因此它们不会减慢您的网站的加载速度或不必要地浪费数据传输。当使用延迟加载时，只有在进入视口时才会加载所有这些元素。要启用延迟加载，您需要做的是将src属性更改data-src为如下所示：
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>如果您已经使用了另外使用的延迟加载解决方案data-src，那么可以通过设置该选项来禁用fullPage.js延迟加载lazyLoading: false。
Auto play/pause embedded media（自动播放/暂停嵌入式媒体）
注意：根据操作系统和浏览器（例如iOS版本<10.0版本的Safari），某些移动设备的自动播放功能可能无法正常工作。
使用autoplay视频或音频的属性，或者autoplay=1YouTube的iframe 的参数将导致媒体元素在页面加载时播放。为了在部分/幻灯片载入中使用，而不是属性data-autoplay。例如：
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>（这一部分我没有用过。。所以不太知道好用不好用。）
暂停休假
当您离开部分或幻灯片时，嵌入的HTML5 <video>/ <audio>和Youtube iframe会自动暂停。可以通过使用该属性来禁用此功能data-keepplaying。例如：
<audio data-autoplay> <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"> </audio>
Use extensions（使用扩展）
fullpage.js 提供了一组（链接）扩展功能可用于增强其默认功能。所有这些都列为fullpage.js选项。引入方法（好像要花钱，我没有细看。）
<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script> <script type="text/javascript" src="fullpage/jquery.fullpage.extensions.min.js"></script>
Options（选项）
-
controlArrows：（默认true）确定是否使用幻灯片的控制箭头向右或向左移动。 -
verticalCentered：（默认true）部分内容的垂直居中。设置时true，您的内容将被库包装。考虑使用委托或在afterRender回调中加载其他脚本。 -
scrollingSpeed：（默认700）滚动切换的速度（毫秒）。 -
sectionsColor：（默认none）定义background-color每个部分的CSS 属性。例：
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
-
anchors：（默认[]）定义要在每个部分的URL上显示的锚链接（#example）。锚点值应该是唯一的。阵列中的锚点的位置将定义应用锚的哪些部分。（第二部分等等）。也可以通过浏览器使用向前和向后导航的锚点。此选项还允许用户将特定部分或幻灯片加入书签。小心！锚点不能与站点上的任何ID元素（或IE的NAME元素）具有相同的值。现在可以通过使用data-anchor如这里所述的属性在HTML结构中直接定义锚点。 -
lockAnchors：（默认false）确定URL中的锚点是否在库中完全有影响。您仍然可以在内部使用锚点来进行自己的功能和回调，但它们在滚动网站时不会有任何影响。如果要将fullPage.js与其他插件在URL中使用anchor组合，则很有用。 -
重要信息有助于了解
anchors选项数组中的值.section与标记中的位置与类的元素直接相关。 -
easing：（默认easeInOutCubic）定义要用于垂直和水平滚动的过渡效果。它需要文件vendors/jquery.easings.min.js或jQuery UI才能使用其某些转换。可以使用其他库。 -
easingcss3：（默认ease）定义使用时使用的过渡效果css3:true。您可以使用预定义的（例如linear，ease-out...）或使用该cubic-bezier功能创建自己的。您可能想要使用Matthew Lein CSS宽松动画工具。 -
loopTop：（默认false）定义在第一部分中向上滚动是否滚动到最后一个部分。 -
loopBottom：（默认false）定义在上一部分中向下滚动是否应该滚动到第一个。 -
loopHorizontal：（默认true）定义水平滑块在到达最后一张或上一张幻灯片后是否会循环播放。 -
css3：（默认true）。定义是否使用JavaScript或CSS3转换在片段和幻灯片中滚动。有助于加速支持CSS3浏览器的平板电脑和移动设备的移动。如果此选项设置为true并且浏览器不支持CSS3，则将使用jQuery后备。 -
autoScrolling：（默认true）定义是否使用“自动”滚动或“正常”滚动。它也影响了片段和手机在浏览器/设备窗口中的贴合方式。 -
fitToSection：（默认true）确定是否将段适合于视口。当设置为true当前活动部分将始终填满整个视口。否则用户可以自由地停在一段中间（何时） -
fitToSectionDelay：（默认为1000）。如果fitToSection设置为true，则会将拟合延迟配置的毫秒数。 -
scrollBar：（默认false）确定是否对该站点使用滚动条。在使用滚动条的情况下，autoScrolling功能仍将按预期工作。用户也可以使用滚动条自由滚动网站，当滚动完成时，fullPage.js将适合屏幕中的部分。 -
paddingTop：（默认0）定义每个部分的顶部填充数值和它的度量（paddingTop：'10px'，paddingTop：'10em'...）有用的情况下使用一个固定的标题。 -
paddingBottom：（默认0）定义每个部分的底部填充值，其中包含数值及其度量（paddingBottom：'10px'，paddingBottom：'10em'...）。在使用固定页脚的情况下很有用。 -
fixedElements：（默认null）定义哪些元素将从使用该css3选项保持固定所必需的插件的滚动结构中取消。它需要一个字符串与这些元素的jQuery选择器。（例如：fixedElements: '#element1, .element2'） -
normalScrollElements：（默认null）如果要在滚动某些元素时避免自动滚动，则这是您需要使用的选项。（对于地图，滚动div等有用）它需要一个字符串与这些元素的jQuery选择器。（例如：）normalScrollElements: '#element1, .element2'。此选项不应用于任何section / slide元素本身。 -
normalScrollElementTouchThreshold：（默认5）定义Fullpage将测试的hdb节点树跳数的阈值，以查看是否normalScrollElements匹配以允许在触摸设备上的div上滚动功能。（例如：normalScrollElementTouchThreshold: 3） -
bigSectionsDestination：（默认null）定义如何滚动到大于视口大小的部分。默认情况下，如果您来自目的地上方的一个区域，则FullPage.js会滚动到顶部，如果来自目的地的下一个区域，则FullPage.js将滚动到顶部。可能的值是top，bottom，null。 -
keyboardScrolling：（默认true）定义是否可以使用键盘导航内容。 -
touchSensitivity：（默认5）定义浏览器窗口宽度/高度的百分比，以及滑动必须测量的距离以导航到下一部分/幻灯片 -
continuousVertical：（默认false）定义在最后一个部分中向下滚动还是向下滚动到第一个部分，如果在第一部分向上滚动则应向上滚动到最后一个部分。不兼容loopTop，loopBottom或任何滚动存在于位点（酒吧scrollBar:true或autoScrolling:false）。 -
continuousHorizontal:(默认false）fullpage.js的扩展名。定义在最后一张幻灯片中向右滑动是否向右滑动到第一张幻灯片，如果第一张幻灯片中向左滚动则向左滑动到最后一张幻灯片。不兼容loopHorizontal。需要fullpage.js> = 2.8.3。 -
scrollHorizontally:(默认false）fullpage.js的扩展名。定义是否使用鼠标滚轮或触控板在滑块内水平滑动。理想的故事讲述。需要fullpage.js> = 2.8.3。 -
interlockedSlides:(默认false）fullpage.js的扩展名。确定移动一个水平滑块是否会迫使滑块在其他部分沿同一方向滑动。可能的值是true，false或与互锁部分的阵列。例如[1,3,5]从1开始。要求fullpage.js = 2.8.3。 -
dragAndMove:(默认false）fullpage.js的扩展名。使用鼠标或手指启用或禁用部分和幻灯片的拖动和轻拂。可能的值是true，false，fingersonly。需要fullPage.js> = 2.8.9。 -
offsetSections:(默认false）fullpage.js的扩展名。提供基于百分比使用非全屏部分的方法。通过显示下一部分或上一部分的部分内容，可以让访问者了解网站的更多内容。需要fullPage.js> = 2.8.8要定义每个部分的百分比，data-percentage必须使用该属性。可以通过在属性中使用布尔值来确定视口中部分的居中位置data-centered（默认为true未指定）。例如：<div class="section" data-percentage="80" data-centered="true">
-
resetSliders：（默认false）。扩展fullpage.js。定义在离开其部分后是否重置每个滑块。需要fullpage.js> = 2.8.3。 -
fadingEffect：（默认false）。扩展fullpage.js。定义是否使用淡入淡出效果，而不是默认滚动效果。可能的值是true，false，sections，slides。因此，它可以垂直或水平地施加，或者同时应用于两者。需要fullpage.js> = 2.8.6。 -
animateAnchor：（默认true）定义给定锚点（＃）时网站的加载是否会以动画滚动到目的地，或者直接加载到给定的部分。 -
recordHistory：（默认true）定义是否将站点的状态推送到浏览器的历史记录。当设置为网站的true每个部分/幻灯片将作为新页面，浏览器的后退和转发按钮将滚动部分/幻灯片以达到网站的上一个或下一个状态。设置时false，网址将不断变化，但不会影响浏览器的历史记录。此选项在使用时自动关闭autoScrolling:false。 -
menu：（默认false）可以使用选择器来指定要与节相关联的菜单。这样，这些部分的滚动将使用该类激活菜单中相应的元素active。这将不会生成一个菜单，而只是将该active类添加到给定菜单中的元素和相应的锚点链接。为了将菜单的元素与段链接起来，data-menuanchor将需要一个HTML 5数据标签（）来使用与段内使用的相同的锚点链接。例：
<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li> </ul>
$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' });注意：菜单元素应放置在整个页面包装器之外，以避免在使用时出现问题
css3:true。否则它将被附加到body插件本身。 -
navigation：（默认false）如果设置为true，将显示由小圆组成的导航栏。 -
navigationPosition：（默认none）可以设置left或right定义导航栏的哪个位置（如果使用的话）。 -
navigationTooltips：（default []）定义要在导航圈中使用的工具提示。示例：navigationTooltips: ['firstSlide', 'secondSlide']。data-tooltip如果您愿意，也可以使用每个部分中的属性来定义它们。 -
showActiveTooltip：（默认false）显示垂直导航中主动查看部分的持久性工具提示。 -
slidesNavigation：（默认false）如果设置true它将显示由网站上的每个横向滑块的小圆圈组成的导航栏。 -
slidesNavPosition：（默认bottom）定义滑块的横向导航栏的位置。承认top和bottom价值观。您可能需要修改CSS样式以确定与顶部或底部的距离以及任何其他样式（如颜色）。 -
scrollOverflow：（默认false）（与IE 8不兼容）定义是否为部分/幻灯片创建滚动，以防其内容大于其高度。设置时true，您的内容将被插件包装。考虑使用委托或在afterRender回调中加载其他脚本。在设置它的情况下true，它需要供应商库scrolloverflow.min.js，它应该在fullPage.js插件之前加载。例如：<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script>
为了防止在某些部分或幻灯片中创建滚动条，使用该类fp-noscroll。
例如：<div class="section fp-noscroll">
-
scrollOverflowReset:(默认false）fullpage.js的扩展名。设置true时，当离开另一个垂直部分时，滚动条滚动条的部分/幻灯片的内容。这样，即使从其下的部分滚动，部分/幻灯片也将始终显示其内容的开始。 -
scrollOverflowOptions：使用scrollOverflow时：真正fullpage.js会利用的分叉和修改后的版本iScroll.js libary。您可以通过向需要使用的iScroll.js选项提供fullpage.js来自定义滚动行为。查看其文档以获取更多信息。 -
sectionSelector：（默认.section）定义用于插件部分的jQuery选择器。有时可能需要更改它以避免使用与fullpage.js相同的选择器的其他插件的问题。 -
slideSelector：（默认.slide）定义用于插件幻灯片的jQuery选择器。有时可能需要更改它以避免使用与fullpage.js相同的选择器的其他插件的问题。 -
responsiveWidth：（默认0）autoScrolling:false在定义的宽度（以像素为单位）中将使用正常的scroll（）。fp-responsive如果用户希望将其用于自己的响应CSS，则会将类添加到body标签。例如，如果设置为900，每当浏览器的宽度小于900时，插件将像正常网站一样滚动。 -
responsiveHeight：（默认0）autoScrolling:false在定义的高度（以像素为单位）中将使用正常的scroll（）。fp-responsive如果用户希望将其用于自己的响应CSS，则会将类添加到body标签。例如，如果设置为900，每当浏览器的高度小于900时，插件将像正常网站一样滚动。 -
responsiveSlides:(默认false）fullpage.js的扩展名。当true响应模式被触发时，当设置为幻灯片时将变成垂直部分。（通过使用responsiveWidth或responsiveHeight上面详细说明的选项）。需要fullpage.js = 2.8.5。 -
parallax:(默认false）fullpage.js的扩展名。定义是否在部分/幻灯片上使用视差背景效果。阅读更多关于如何应用视差选项。 -
parallaxOptions：（默认值：）{ type: 'reveal', percentage: 62, property: 'translate'}。允许在使用选项“视差”时配置视差背景效果的参数：true。阅读更多关于如何应用视差选项。 -
lazyLoading：（默认true）默认情况下，延迟加载处于活动状态，这意味着它将延迟加载包含属性的任何媒体元素data-src，详细信息请参见“ 延迟加载”文档。如果您想使用任何其他延迟加载库，您可以禁用此fullpage.js功能。
Methods（方法）
你可以在这里看到他们 。
moveSectionUp（）
演示向上滚动一部分：
$.fn.fullpage.moveSectionDown();
moveSectionDown（）
演示向下滚动一个部分：
$.fn.fullpage.moveSectionDown();
moveTo（部分，幻灯片）
演示将页面滚动到指定的部分并滑动。第一张幻灯片（默认为可见的幻灯片）将具有索引0。
/*滚动到具有锚链接“firstSlide”和第二个幻灯片 */
$.fn.fullpage.moveTo('firstSlide', 2);
//滚动到网站 $.fn.fullpage.moveTo(3, 0); //Which is the same as $.fn.fullpage.moveTo(3);
silentMoveTo（section，slide）
演示 完全一样，moveTo但在这种情况下，它会执行无动画的滚动。直接跳到目的地。
/ *滚动到具有锚链接“firstSlide”和第二个幻灯片* /
$.fn.fullpage.silentMoveTo('firstSlide', 2);
moveSlideRight（）/moveSlideLeft（）
演示(right) 演示 (left)将当前部分的水平滑块滚动到下一张幻灯片：
$.fn.fullpage.moveSlideRight(); $.fn.fullpage.moveSlideLeft();
setAutoScrolling(boolean)
演示实时设置滚动配置。定义页面滚动的行为方式。如果设置true，将使用“自动”滚动，否则将使用站点的“手动”或“正常”滚动。
$.fn.fullpage.setAutoScrolling(false);
setFitToSection(boolean)
演示 设置选项的值，用于fitToSection确定是否适合屏幕中的部分。
$.fn.fullpage.setFitToSection(false);
fitToSection()
演示 滚动到最接近的活动部分，将其安装在视口中。
$.fn.fullpage.fitToSection();
setLockAnchors(boolean)
演示 设置选项的值，lockAnchors确定锚点是否在URL中有任何影响。(传入 true 使锚点不再添加至URL中 )
$.fn.fullpage.setLockAnchors(false);
setAllowScrolling(boolean, [directions])
演示通过使用鼠标滚轮/触控板或触摸手势（默认情况下处于活动状态）来添加或删除滚动部分/幻灯片的可能性。请注意，这不会禁用键盘滚动。你需要使用setKeyboardScrolling它。
directions：（可选参数）录取值：all，up，down，left，right或由类似的逗号分隔它们的组合down, right。它定义滚动将被启用或禁用的方向。
//disabling scrolling $.fn.fullpage.setAllowScrolling(false); //disabling scrolling down $.fn.fullpage.setAllowScrolling(false, 'down'); //disabling scrolling down and right $.fn.fullpage.setAllowScrolling(false, 'down, right');
setKeyboardScrolling(boolean, [directions])
演示通过使用键盘（默认情况下处于活动状态）来添加或删除滚动部分的可能性。
directions：（可选参数）录取值：all，up，down，left，right或由类似的逗号分隔它们的组合down, right。它定义滚动将被启用或禁用的方向。
//disabling all keyboard scrolling $.fn.fullpage.setKeyboardScrolling(false); //disabling keyboard scrolling down $.fn.fullpage.setKeyboardScrolling(false, 'down'); //disabling keyboard scrolling down and right $.fn.fullpage.setKeyboardScrolling(false, 'down, right');
setRecordHistory(boolean)
演示定义是否记录URL中每个哈希更改的历史记录。
$.fn.fullpage.setRecordHistory(false);
setScrollingSpeed(milliseconds)
演示以毫秒为单位定义滚动速度。
$.fn.fullpage.setScrollingSpeed(700);
destroy(type)（销毁）
演示销毁插件事件和可选的HTML标记和样式。使用AJAX加载内容时非常理想。
type:(可选参数）可以为空或all。如果all被传递，则fullpage.js使用的HTML标记和样式将被删除。这样一来，原始的HTML标记就是维护任何插件修改之前使用的。
//destroying all Javascript events created by fullPage.js (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
//destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.
$.fn.fullpage.destroy('all');
reBuild() （重建）
更新DOM结构以适应新的窗口大小或其内容。非常适合与AJAX调用结合使用，也可以在站点的DOM结构中进行外部更改，特别是在使用时scrollOverflow:true。
$.fn.fullpage.reBuild();
setResponsive(boolean)
演示设置页面的响应模式。当设置为true autoScrolling将被关闭，结果将完全一样，当responsiveWidth或responsiveHeight选项被触发。
$.fn.fullpage.setResponsive(true);
responsiveSlides.toSections()
扩展fullpage.js。需要fullpage.js版本> = 2.8.5。将水平幻灯片变成垂直部分。
$.fn.fullpage.responsiveSlides.toSections();
responsiveSlides.toSlides()
扩展fullpage.js。需要fullpage.js = 2.8.5。将原始幻灯片（现在转换成垂直部分）重新放回水平幻灯片。
$.fn.fullpage.responsiveSlides.toSlides();
Callbacks (回调)
您可以在看到他们 演示。
afterLoad (anchorLink, index)
在滚动结束之后，加载了这些部分后的回调。参数：
anchorLink：anchorLink对应的部分。index：部分的索引。从1开始。
在插件中没有定义anchorLink的情况下，index参数将是唯一使用的参数。
例：
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
//using index
if(index == 3){
alert("Section 3 ended loading");
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
onLeave (index, nextIndex, direction)
一旦用户离开了一个部分，转换到新的部分，这个回调就被触发。返回false将在发生之前取消移动。
参数：
index：离开部分的索引。从1开始。nextIndex：目的地段的索引。从1开始。direction：它将取值up或down取决于滚动方向。
例：
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
//after leaving section 2
if(index == 2 && direction =='down'){
alert("Going to section 3!");
}
else if(index == 2 && direction == 'up'){
alert("Going to section 1!");
}
}
});
Cancelling the scroll before it takes place(在发生之前取消滚动)
您可以通过返回取消滚动false的onLeave回调：
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
//it won't scroll if the destination is the 3rd section
if(nextIndex == 3){
return false;
}
}
});
afterRender()
在生成页面的结构之后触发此回调。这是您要用于初始化其他插件或者启动任何需要文档准备就绪的代码的回调（因为此插件会修改DOM以创建结果）。有关详细信息，请参阅常见问题
例：
$('#fullpage').fullpage({
afterRender: function(){
var pluginContainer = $(this);
alert("The resulting DOM structure is ready");
}
});
afterResize()
调整浏览器窗口大小后，将触发此回调。就在这些部分调整大小之后。
例：
$('#fullpage').fullpage({
afterResize: function(){
var pluginContainer = $(this);
alert("The sections have finished resizing");
}
});
afterResponsive(isResponsive)
此回调在fullpage.js从正常模式更改为响应模式或从响应模式更改为正常模式后触发。
参数：
isResponsive：布尔值，确定它是否进入响应模式（true）或返回到正常模式（false）。
例：
$('#fullpage').fullpage({
afterResponsive: function(isResponsive){
alert("Is responsive: " + isResponsive);
}
});
afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)
滚动结束后，一旦加载了一个部分的幻灯片，就会启动回调。参数：
anchorLink：anchorLink对应的部分。index：部分的索引。从1开始。slideAnchor：对应滑块的锚（万一有）slideIndex：幻灯片的索引。从1.开始（默认幻灯片不算作幻灯片，而是作为一部分）
在没有为幻灯片或幻灯片定义anchorLinks的情况下，slideIndex参数将是唯一使用的。例：
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
//first slide of the second section
if(anchorLink == 'secondPage' && slideIndex == 1){
alert("First slide loaded");
}
//second slide of the second section (supposing #secondSlide is the
//anchor for the second slide
if(index == 2 && slideIndex == 'secondSlide'){
alert("Second slide loaded");
}
}
});
onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)
一旦用户离开幻灯片去转到另一张幻灯片，这个回调就被触发。返回false将在发生之前取消移动。
参数：
anchorLink：anchorLink对应的部分。index：部分的索引。从1开始。slideIndex：幻灯片的索引。从0开始。direction：取值right或left取决于滚动方向。nextSlideIndex：目标幻灯片的索引。从0开始。
例：
$('#fullpage').fullpage({
onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
var leavingSlide = $(this);
//leaving the first slide of the 2nd Section to the right
if(index == 2 && slideIndex == 0 && direction == 'right'){
alert("Leaving the fist slide!!");
}
//leaving the 3rd slide of the 2nd Section to the left
if(index == 2 && slideIndex == 2 && direction == 'left'){
alert("Going to slide 2! ");
}
}
});
在发生之前取消移动
您可以通过返回取消移动false的onSlideLeave回调。与取消运动时一样onLeave。
===============================================================
对翻译不满意的，请查看原文档 ，不客气
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
