Record the configuration of fullPage.js here
Recommended website : https://www.cnblogs.com/wanghuih/p/6520498.html
Take a look at the list below:
Specifically: options, methods and callback functions
configure
1. Options
Option Type Default Value Description| verticalCentered | string | true | Whether the content is vertically centered |
| resize | Boolean value | false | Whether the font scales as the window scales |
| slidesColor | function | without | set background color |
| anchors | array | without | define anchor links |
| scrollingSpeed | integer | 700 | scroll speed in milliseconds |
| easing | string | easeInQuart | scroll animation |
| menu | Boolean value | false | Binding the menu, after setting the relevant properties corresponding to the value of anchors, the menu can control the scrolling |
| navigation | Boolean value | false | Whether to show project navigation |
| navigationPosition | string | right | The position of the item navigation, optional left or right |
| navigationColor | string | #000 | Project Navigation Color |
| navigationTooltips | array | null | project navigation tips |
| slidesNavigation | Boolean value | false | Whether to show item navigation for left and right sliders |
| slidesNavPosition | string | bottom | The position of the item navigation of the left and right sliders, optional top or bottom |
| controlArrowColor | string | #fff | The background color of the arrows of the left and right sliders |
| walkBottom | Boolean value | false | Whether to scroll back to the top after scrolling to the bottom |
| loopTop | Boolean value | false | Whether to scroll to the bottom after scrolling to the top |
| loopHorizontal | Boolean value | true | Whether the left and right sliders slide circularly |
| autoScrolling | Boolean value | true | Whether to use the plugin's scrolling method, if false is selected, the browser's own scroll bar will appear |
| scrollOverflow | Boolean value | false | Whether to display the scroll bar when the content exceeds the full screen |
| css3 | Boolean value | false | Whether to scroll with CSS3 transforms |
| paddingTop | string | 0 | distance from top |
| paddingBottom | string | 0 | distance from bottom |
| fixedElements | string | without | |
| normalScrollElements | without | ||
| keyboardScrolling | Boolean value | true | Whether to use the keyboard arrow keys to navigate |
| touchSensitivity | integer | 5 | |
| continuousVertical | Boolean value | false | Whether to loop scroll, not compatible with loopTop and loopBottom |
| Anchor | Boolean value | true | |
| normalScrollElementTouchThreshold | integer | 5 |
2. Method
name description| moveSectionUp () | scroll up |
| moveSectionDown () | scroll down |
| moveTo(section, slide) | scroll to |
| moveSlideRight() | slide scroll right |
| moveSlideLeft() | slide scroll left |
| setAutoScrolling() | Set the page scrolling method, auto scroll when set to true |
| setAllowScrolling() | Add or remove mouse wheel/trackpad controls |
| setKeyboardScrolling() | Add or remove keyboard arrow keys |
| setScrollingSpeed() | Define the scroll speed in milliseconds |
3. Callback function
name description| afterLoad | The callback function after scrolling to a certain screen, receiving two parameters, anchorLink and index, anchorLink is the name of the anchor link, index is the serial number, starting from 1 |
| onLeave | The callback function before scrolling, receives 3 parameters of index, nextIndex and direction: index is the serial number of the "page" left, which starts from 1;
nextIndex is the serial number of the "page" scrolled to, starting from 1; The direction determines whether to scroll up or down, and the value is up or down. |
| afterRender | The callback function after the page structure is generated, or the callback function after the page initialization is completed |
| afterSlideLoad | The callback function after scrolling to a horizontal slider, similar to afterLoad, receives 4 parameters of anchorLink, index, slideIndex, direction |
| onSlideLeave | The callback function before a horizontal slider is scrolled, similar to onLeave, receiving 4 parameters of anchorLink, index, slideIndex, direction |
Let's look at the case:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
<style >
body {
text-align: center;
font-size: 12px;
color: white;
}
.section1 {
background-color: orange;
text-align: center;
}
.section2 {
background-color: red;
text-align: center;
}
.section3 {
background-color: green;
text-align: center;
}
.section4 {
background-color: gray;
text-align: center;
}
.section5 {
background-color: black;
text-align: center;
}
.slide{
background-color:pink;}
#header {
font-size: 50px;
position: fixed;
top: 0;
right: 50px;
}
#fullpageMenu{
font-size:20px;
position:fixed;
top:50px;
z-index:999;
list-style-type:none;
}
#fullpageMenu a{
text-align:left;
text-decoration:none;}
#fullpageMenu a:hover{
color:#FFF;
}
</style>
</head>
<body>
<div id="header">header</div>
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
<li data-menuanchor="page5"><a href="#page5">page5</a></li>
</ul>
<div id="fullpage">
<div class="section ">
<h1> first page</h1>
</div>
<div class="section section2">
<div class="slide slide1">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
</div>
<div class="section section3">
<h1>third page</h1>
</div>
<div class="section section4">
<h1> forth page</h1>
</div>
<div class="section section5">
<h1> fifth page</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js">
</script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['red','blue','yellow','pink','black'],
//resize:false,
//scrollingSpeed:2000, //滚动时间，2000就是两秒
anchors:['page1','page2','page3','page4','page5'],
/*设置锚链接 主要是在收藏某一页的时候，当再次打开的时候，它不会由第一页滑到这一页，而是直接出现这一页*/
// lockAnchors:true,/*锁定锚节点*/
//loopTop:true, /* 顶部循环滚动是跳往底部的页面*/
/* loopBottom:true, 底部循环滚动，同样是跳往页面
loopHorizontal:false, 幻灯片循环滚动
*/
//autoscrolling：true, /*页面不会按照插件的滚动方式滚动，而是按照滚动条的滚动方式滚动*/c'C
//scrollBar:true, /*此设置项为true，则会出现滚动条但还是按照插件的滚动方式*/
fixedElements:'#header', //设置某一元素固定于某一位置，通过JQuary捕捉定位到某一元素（如这个实例中的header）
//continuousVertical:true, /*循环滚动，与loopTop和loopBottom不兼容，不能同时设置，经测试如果同时设置则会有looopTop或者loopBottom的效果*/
//menu:'#fullpageMenu', //为菜单选项，在前面的ul中要把锚链接相应的链接起来。
navigation:true, //导航是否显示
navigationPosition:'right', //导航条的位置，默认是右
navigationTooltips:['page1','page2','page3','page4','page5'],//导航条显示的内容
showActiveTooltip:true, //导航条内容是否显示，如为false则须将鼠标放到导航条上才能显示
slidesNavigation:true, //幻灯片导航条是否显示
slidesNavPosition:'top', //幻灯片导航条的位置
});
});
</script>
</body>
</html>
.