Jquery Plugin-fullpage. js, jquery-fullpage.js

Jquery Plugin-fullpage. js, jquery-fullpage.js

BytesIntroduction

FullPage. js is a jQuery-based plug-in that can easily create full-screen websites. Its main functions include:

• Supports mouse scrolling
• Supports forward and backward navigation and keyboard control
• Multiple callback Functions
• Support for mobile phone and tablet touch events
• Supports CSS3 Animation
• Supports Window Scaling
• Auto adjust when the window is scaled
• You can set the scroll width, background color, scroll speed, loop options, callback, and text alignment.

️ Compatibility jQuery compatibility

Compatible with jQuery 1.7 +.

Browser compatibility

Method 1. Import the file

Css Section<Link rel = "stylesheet" href = "jquery.fullPage.css">Js Section<Script src = "jquery. min. js"> </script> <! -- Jquery. easings. min. js is used for the easing parameter. You can also use the complete jQuery UI instead. If you do not need to set the easing parameter, you can remove the file --> <script src = "jquery. easings. min. js "> </script> <! -- If scroloverflow is set to true, iscroll needs to be introduced. js, must be in fullpage. before js is introduced, otherwise an error is reported --> <script src = "iscroll. js "> </script> <script src =" jquery. fullPage. js "> </script>

2. HTML

<Div id = "fullpage"> <div class = "section"> 
Each section represents a screen. The "first screen" is displayed by default. to specify the "screen" displayed when loading the page, you can add class = "active" to the corresponding section, for example:
<Div class = "section active"> Screen 3 </div>
At the same time, you can add a slide (horizontal scroll) in the section, such:
<Div id = "fullpage"> <div class = "section"> Screen 1 </div> <div class = "section"> screen 2 </div> <div class = "section"> <div class = "slide"> the first screen of the third screen </div> <div class = "slide"> the second screen of the third screen </div> <div class = "slide"> third screen </div> <div class = "slide"> fourth screen </div> <div class = "section"> fourth screen </div>
3. JavaScript
$(function(){    $('#dowebok').fullpage();});
Lifecycle configuration 1. Options

 

 
  
 
   
 
    
Option
 
    
Type
 
    
Default Value
 
    
Description
 
   
 
  
 
  
 
   
 
    
VerticalCentered
 
    
String
 
    
True
 
    
Vertical center of content
 
   
 
   
 
    
Resize
 
    
Boolean Value
 
    
False
 
    
Whether the font scales with the window zoom
 
   
 
   
 
    
SlidesColor
 
    
Function
 
    
None
 
    
Set background color
 
   
 
   
 
    
Anchors
 
    
Array
 
    
None
 
    
Define an anchor Link
 
   
 
   
 
    
ScrollingSpeed
 
    
Integer
 
    
700
 
    
Scroll speed, in milliseconds
 
   
 
   
 
    
Easing
 
    
String
 
    
EaseInQuart
 
    
Scroll Animation Mode
 
   
 
   
 
    
Menu
 
    
Boolean Value
 
    
False
 
    
Bind the menu. After the set attributes correspond to the anchors value, the menu can control scrolling.
 
   
 
   
 
    
Navigation
 
    
Boolean Value
 
    
False
 
    
Show project navigation?
 
   
 
   
 
    
NavigationPosition
 
    
String
 
    
Right
 
    
The position of the Project navigation. Optional values: left or right.
 
   
 
   
 
    
NavigationColor
 
    
String
 
    
#000
 
    
Project navigation color
 
   
 
   
 
    
NavigationTooltips
 
    
Array
 
    
Null
 
    
Project navigation tip
 
   
 
   
 
    
SlidesNavigation
 
    
Boolean Value
 
    
False
 
    
Whether to display the project navigation of the left and right slide
 
   
 
   
 
    
SlidesNavPosition
 
    
String
 
    
Bottom
 
    
The position of the Project navigation on the left and right sides of the slider, which can be top or bottom.
 
   
 
   
 
    
ControlArrowColor
 
    
String
 
    
# Fff
 
    
Background Color of the arrow on the left and right sides of the slider
 
   
 
   
 
    
LoopBottom
 
    
Boolean Value
 
    
False
 
    
Whether to roll back to the top after scrolling to the bottom
 
   
 
   
 
    
LoopTop
 
    
Boolean Value
 
    
False
 
    
Scroll to the top and whether to roll to the bottom
 
   
 
   
 
    
LoopHorizontal
 
    
Boolean Value
 
    
True
 
    
Whether or not the slider slides cyclically
 
   
 
   
 
    
AutoScrolling
 
    
Boolean Value
 
    
True
 
    
Whether to use the plug-in's scroll mode. If false is selected, the browser's own scroll bar will appear.
 
   
 
   
 
    
Scroloverflow
 
    
Boolean Value
 
    
False
 
    
Whether the scroll bar is displayed when the content exceeds the full screen
 
   
 
   
 
    
Css3
 
    
Boolean Value
 
    
False
 
    
Use CSS3 transforms to scroll?
 
   
 
   
 
    
PaddingTop
 
    
String
 
    
0
 
    
Distance from the top
 
   
 
   
 
    
PaddingBottom
 
    
String
 
    
0
 
    
Distance from bottom
 
   
 
   
 
    
FixedElements
 
    
String
 
    
None
 
    
 
 
   
 
   
 
    
NormalScrollElements
 
    
 
 
    
None
 
    
 
 
   
 
   
 
    
KeyboardScrolling
 
    
Boolean Value
 
    
True
 
    
Whether to use the keyboard arrow keys for navigation
 
   
 
   
 
    
Touchsensiti.pdf
 
    
Integer
 
    
5
 
    
 
 
   
 
   
 
    
ContinuousVertical
 
    
Boolean Value
 
    
False
 
    
Whether to scroll cyclically. It is not compatible with loopTop and loopBottom.
 
   
 
   
 
    
AnimateAnchor
 
    
Boolean Value
 
    
True
 
    
 
 
   
 
   
 
    
NormalScrollElementTouchThreshold
 
    
Integer
 
    
5
 
    
 
 
   
 
  

 
2. Method

 

 
  
 
   
 
    
Name
 
    
Description
 
   
 
  
 
  
 
   
 
    
MoveSectionUp ()
 
    
Scroll up
 
   
 
   
 
    
MoveSectionDown ()
 
    
Scroll down
 
   
 
   
 
    
MoveTo (section, slide)
 
    
Scroll
 
   
 
   
 
    
MoveSlideRight ()
 
    
Slide scroll to the right
 
   
 
   
 
    
MoveSlideLeft ()
 
    
Slide scroll left
 
   
 
   
 
    
SetAutoScrolling ()
 
    
Sets the page scroll mode. If it is set to true, the page is automatically rolled.
 
   
 
   
 
    
SetAllowScrolling ()
 
    
Add or remove mouse wheel/touchpad Control
 
   
 
   
 
    
SetKeyboardScrolling ()
 
    
Add or delete keyboard arrow keys
 
   
 
   
 
    
SetScrollingSpeed ()
 
    
Defines the scroll speed in milliseconds
 
   
 
  

 
3. Callback Function
 

 

 
  
 
   
 
    
Name
 
    
Description
 
   
 
  
 
  
 
   
 
    
AfterLoad
 
    
The callback function after scrolling to a screen receives two parameters: anchorLink and index. anchorLink is the name of the anchorLink and index is the serial number. It is calculated from 1.
 
   
 
   
 
    
OnLeave
 
    
The callback function before scrolling receives the index, nextIndex, and direction parameters. The index is the number of the left "page" and is calculated from 1;
 
NextIndex is the serial number of the scrolling "page", which is calculated from 1;
Direction determines whether to scroll up or down. 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 complete.
 
   
 
   
 
    
AfterSlideLoad
 
    
The callback function that scrolls to a horizontal slider. Similar to afterLoad, it receives four parameters: anchorLink, index, slideIndex, and direction.
 
   
 
   
 
    
OnSlideLeave
 
    
The callback function before a horizontal slider is rolled. Similar to onLeave, it receives four parameters: anchorLink, index, slideIndex, and direction.