jquery Plugin-fullpage.js

1?? Introduction

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

2?? Compatibility jquery Compatible

Compatible with JQuery 1.7+.

Browser compatible

3?? Using Method 1, introducing the file

CSS Section<Linkrel= "stylesheet"href= "Jquery.fullPage.css">js Section<Scriptsrc= "Jquery.min.js"></Script><!--Jquery.easings.min.js is used for easing parameters, or it can be replaced with the full jquery UI, and if you do not need to set the easing parameter, you can remove the change file -<Scriptsrc= "Jquery.easings.min.js"></Script><!--if Scrolloverflow is set to true, you need to introduce iscroll.js, be sure to introduce it before fullpage.js, or you will get an error -<Scriptsrc= "Iscroll.js"></Script><Scriptsrc= "Jquery.fullPage.js"></Script>

2. HTML

<DivID= "Fullpage">    <Divclass= "section">        <H3>First screen</H3>    </Div>    <Divclass= "section">        <H3>Second screen</H3>    </Div>    <Divclass= "section">        <H3>Third screen</H3>    </Div>    <Divclass= "section">        <H3>Screen Four</H3>    </Div></Div>

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:

<class= "section active"> Third screen </div> 

Also, you can add slide (horizontal scrolling) within a section, such as:

<DivID= "Fullpage">    <Divclass= "section">First screen</Div>    <Divclass= "section">Second screen</Div>    <Divclass= "section">        <Divclass= "Slide">The first screen of the third screen</Div>        <Divclass= "Slide">Second screen of the third screen</Div>        <Divclass= "Slide">Third screen of screen</Div>        <Divclass= "Slide">The fourth screen of the third screen</Div>    </Div>    <Divclass= "section">Screen Four</Div></Div>

3. JavaScript

$ (function () {    $ (' #dowebok '). fullpage ();});

4?? 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

jquery Plugin-fullpage.js