Introducing a jquery plugin: fullpage.js

Source: Internet
Author: User
Tags set background anchorlink

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.