Introducing a jquery plugin: fullpage.js

Demo Address: http://www.dowebok.com/demo/2014/77/Introduction

Today we often see full-screen websites, especially foreign websites. These sites with a few large pictures or color blocks to do the background, and then add some simple content, appear exceptionally high-end atmosphere of the grade. such as the introduction of the IPhone 5C page (view), the official website of the QQ browser. If you also want your website can design perfect screen, appear more on the grade, you can try Fullpage.js.

Fullpage.js is a jQuery-based plugin that makes it easy and easy to make full-screen Web sites, with the main features:

• Support Mouse Scrolling
• Support for forward and backward and keyboard control
• Multiple callback functions
• Support phone, tablet touch events
• Support CSS3 Animations
• Support for Window Scaling
• Auto Adjust when window is scaled
• You can set scrolling width, background color, scrolling speed, looping options, callbacks, text alignment, and more

 Compatibility jquery Compatible

Compatible with JQuery 1.7+.

Browser compatible

Ie8+?	Chrome?	Firefox?	Opera?	Safari?

Using Method 1, introducing the file

<link rel= "stylesheet" href= "Css/jquery.fullpage.css" ><script src= "Js/jquery.min.js" ></script> <!--Jquery.easings.min.js is used for easing parameters, you can also use the full jquery UI instead, if you do not need to set easing parameters, you can remove the change file--><script src= "Js/jquery . easings.min.js "></script><!--if Scrolloverflow is set to true, you need to introduce jquery.slimscroll.min.js, which is normally not required-- <script src= "Js/jquery.slimscroll.min.js" ></script><script src= "Js/jquery.fullpage.js" ></ Script>

2. HTML

<div id= "Dowebok" >    <div class= "section" >        
Each section represents a screen, the default display is "First screen", if you want to specify the screen to display when loading the page, you can add class= "active" in the corresponding section, such as:
<div class= "section active" > Third screen </div>
At the same time, you can add slide to the section, such as:
<div id= "Dowebok" >    <div class= "section" > First screen </div>    <div class= "section" > Second screen </ div>    <div class= "section" >        <div class= "Slide" > First screen of the third screen </div>        <div class= "slide "The second screen of > Third screen </div>        <div class=" Slide "> Third screen </div>        <div class=" Slide "> The fourth screen of the third screen </div>    </div>    <div class= "section" > Fourth screen </div></div>
3. JavaScript
$ (function () {    $ (' #dowebok '). fullpage ();});
Configuration
1. Options
 
 

  
  
 
   
 
    
Options
 
    
type
 
    
Default Value
 
    
Description
 
   
 
  
  
  
 
   
 
    
Verticalcentered
 
    
String
 
    
True
 
    
Whether the content is centered vertically
 
   
 
   
 
    
Resize
 
    
Boolean value
 
    
False
 
    
Whether the font is scaled as the window zooms
 
   
 
   
 
    
Slidescolor
 
    
Function
 
    
No
 
    
Set Background color
 
   
 
   
 
    
Anchors
 
    
Array
 
    
No
 
    
Define Anchor chain Connection
 
   
 
   
 
    
Scrollingspeed
 
    
Integer
 
    
700
 
    
Scrolling speed in milliseconds
 
   
 
   
 
    
Easing
 
    
String
 
    
Easeinquart
 
    
Scrolling animation mode
 
   
 
   
 
    
Menu
 
    
Boolean value
 
    
False
 
    
The menu can control scrolling after the set of related properties corresponds to the value of the anchors.
 
   
 
   
 
    
Navigation
 
    
Boolean value
 
    
False
 
    
Whether to show project navigation
 
   
 
   
 
    
Navigationposition
 
    
String
 
    
Right
 
    
Location of the project Navigator, optional left or right
 
   
 
   
 
    
Navigationcolor
 
    
String
 
    
#000
 
    
Color of Project Navigation
 
   
 
   
 
    
Navigationtooltips
 
    
Array
 
    
Empty
 
    
Tip for Project Navigation
 
   
 
   
 
    
Slidesnavigation
 
    
Boolean value
 
    
False
 
    
Whether to display item navigation for left and right sliders
 
   
 
   
 
    
Slidesnavposition
 
    
String
 
    
Bottom
 
    
Position of the left and right slider item navigation, optional top or bottom
 
   
 
   
 
    
Controlarrowcolor
 
    
String
 
    
#fff
 
    
The background color of the arrows on the left and right sliders
 
   
 
   
 
    
Loopbottom
 
    
Boolean value
 
    
False
 
    
Roll back to top after scrolling to the bottom
 
   
 
   
 
    
Looptop
 
    
Boolean value
 
    
False
 
    
Roll bottom after scroll to top
 
   
 
   
 
    
Loophorizontal
 
    
Boolean value
 
    
True
 
    
Whether the left and right sliders are circular sliding
 
   
 
   
 
    
Autoscrolling
 
    
Boolean value
 
    
True
 
    
Whether to use the plug-in scrolling mode, if you choose False, the browser's own scroll bar will appear
 
   
 
   
 
    
Scrolloverflow
 
    
Boolean value
 
    
False
 
    
Whether the scroll bar is displayed after the content is over full screen
 
   
 
   
 
    
Css3
 
    
Boolean value
 
    
False
 
    
Whether to use CSS3 transforms scrolling
 
   
 
   
 
    
Paddingtop
 
    
String
 
    
0
 
    
The distance from the top
 
   
 
   
 
    
Paddingbottom
 
    
String
 
    
0
 
    
Distance to bottom
 
   
 
   
 
    
Fixedelements
 
    
String
 
    
No
 
    
 
   
 
   
 
    
Normalscrollelements
 
    
 
    
No
 
    
 
   
 
   
 
    
Keyboardscrolling
 
    
Boolean value
 
    
True
 
    
Whether to use keyboard arrow keys to navigate
 
   
 
   
 
    
Touchsensitivity
 
    
Integer
 
    
5
 
    
 
   
 
   
 
    
Continuousvertical
 
    
Boolean value
 
    
False
 
    
Cyclic scrolling, incompatible with looptop and Loopbottom
 
   
 
   
 
    
Animateanchor
 
    
Boolean value
 
    
True
 
    
 
   
 
   
 
    
Normalscrollelementtouchthreshold
 
    
Integer
 
    
5
 
    
 
   
 
  
 
 
2. Methods
 
 
 
  
  
 
   
 
    
name
 
    
Description
 
   
 
  
 
  
  
 
   
 
    
Movesectionup ()
 
    
Scroll up
 
   
 
   
 
    
Movesectiondown ()
 
    
Scroll down
 
   
 
   
 
    
MoveTo (section, slide)
 
    
Scroll to
 
   
 
   
 
    
Moveslideright ()
 
    
Slide Scroll Right
 
   
 
   
 
    
Moveslideleft ()
 
    
Slide Scroll Left
 
   
 
   
 
    
Setautoscrolling ()
 
    
Set page scrolling mode, set to True when auto scroll
 
   
 
   
 
    
Setallowscrolling ()
 
    
Add or remove mouse wheel/trackpad controls
 
   
 
   
 
    
Setkeyboardscrolling ()
 
    
Add or remove keyboard direction key controls
 
   
 
   
 
    
Setscrollingspeed ()
 
    
Defines the scrolling speed in milliseconds
 
   
 
  
 
 
 
3. Callback function
 
 

  
  
 
   
 
    
name
 
    
Description
 
   
 
  
  
  
 
   
 
    
Afterload
 
    
Scroll to a screen after the callback function, receive Anchorlink and index two parameters, Anchorlink is the name of the anchor chain, index is the ordinal, starting from 1 to calculate
 
   
 
   
 
    
Onleave
 
    
The callback function before scrolling, receives index, Nextindex and direction 3 parameters: Index is the number of "page" to leave, the calculation starts from 1;
Nextindex is the serial number of the "page" that is scrolled to, starting from 1;
direction determines whether to scroll up or down, and the value is up or down.
 
   
 
   
 
    
AfterRender
 
    
callback function after page structure is generated, or callback function after page initialization is completed
 
   
 
   
 
    
Afterslideload
 
    
callback function after scrolling to a smooth block of water, similar to Afterload, receiving Anchorlink, index, SlideIndex, direction 4 parameters
 
   
 
   
 
    
Onslideleave
 
    
A callback function before the rolling of a water smoothing block, similar to Onleave, receiving Anchorlink, index, SlideIndex, direction 4 parameters
 
   
 
  
 
 
Introducing a jquery plugin: fullpage.js