Fullpage.js and Fullpage detailed __js

Fullpage.js and Fullpage are able to achieve full screen scrolling, the difference is: fullpage.js need to rely on the jquery library, and fullpage do not need to rely on any one JS library, can be used alone.

one, fullpage.js to achieve full screen

Fullpage.js is the open source jquery plug-in Library, its GitHub address: https://github.com/alvarotrigo/fullPage.js

1. Basic Demo

1.1 Introduction of files

<!--introduce CSS-->
<link rel= "stylesheet type=" Text/css "href=" http://www.ido321.com/fullPage.js-master/ Jquery.fullPage.css "/>
<!--fullpage.js dependent on jquery library-->
<script type=" text/javascript "src=" http ://www.ido321.com/jquery.js "></script>
<script type=" Text/javascript "src=" http://www.ido321.com /fullpage.js-master/jquery.fullpage.min.js "></script>

1.2 CSS: The introduction of CSS is not to set the style of elements, the style of elements need to write their own

<style type= "Text/css" >        body
        {
            color: #FFFFFF;
        }
        Section1
        {
            background-color: #BFDA00;
        }
        . Section2
        {
            background-color: #2EBE21;
        }
        . Section3
        {
            background-color: #2C3E50;
        }
        . Section4
        {
            background-color: #FF9900;
        }
    </style>

1.3 HTML: Each section Code a screen, the default from the first screen display, if you need to customize from a screen start display, add an active class for section. Example default display from third screen

<div id= "ido" >
    <div class= "section section1" >
        
 
1.4 JS:

<script type= "Text/javascript" >
    $ (function () {
        $ ("#ido"). Fullpage ();
</script>
 
Effect: http://denon-7c931.coding.io/fullpagejs.html

1.5 You can add a sub scrolling screen in a screen, with the help of the slide class. Revise the second section as follows:

<div class= "section section2" style= "Text-align:center" >
            
 
Effect: http://denon-7c931.coding.io/fullpagejs.html

1.6 Add a background screen, add two section in HTML

<div class= "section section5" >
    

Add CSS
. section5 {Background:url (http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
Section6 {background:url (http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}
 
Effects: http://denon-7c931.coding.io/bjfull.html (scrolling to 5 and 6 screens) 1.7 Looping Demo: Continuousvertical set to True

$ (function () {
    $ ("#ido"). Fullpage (
        {
            continuousvertical:true
        });
 
Effect: http://denon-7c931.coding.io/xhfull.html (scroll to 6th screen, then scroll down automatically to the first screen)

1.8 Binding Menus: adding menu items

<ul id= "Menu" > <li data-menuanchor= "Page1" class= "active" ><a href= "http://www.ido321.com/1452.html# Page1 "> First screen </a></li> <li data-menuanchor=" Page2 "><a href=" http://www.ido321.com/1452.html# Page2 "> Second screen </a></li> <li data-menuanchor=" Page3 "><a href=" http://www.ido321.com/1452.html# Page3 "> Third screen </a></li> <li data-menuanchor=" page4 "><a href=" http://www.ido321.com/1452.html# Page4 "> Fourth screen </a></li> <li data-menuanchor=" page5 "><a href=" http://www.ido321.com/1452.html# Page5 "> 5th screen </a></li> <li data-menuanchor=" Page6 "><a href=" http://www.ido321.com/1452.html# Page6 "> 6th screen </a></li> </ul> 
 
Add CSS

#menu {margin:0; padding:0; position:fixed; left:10px; top:10px; list-style-type:none; z-index:70;}
#menu li {float:left; margin:  0 10px 0 0; font-size:14px;}
#menu a {float:left padding:10px 20px; background-color: #fff; color: #333; text-decoration:none;}
#menu. Active a {color: #fff; Background-color: #333;}
 
Modify JS

$ (function () {
            $ ("#ido"). Fullpage (
                {
                    continuousvertical:true,  //Looping demo
                        //Bind menu
                         anchors: [' Page1 ', ' page2 ', ' page3 ', ' page4 ', ' page5 ', ' Page6 '],
                    menu: ' #menu ',

                });
        
 
Effect: http://denon-7c931.coding.io/memufull.html

1.9 Navigation Demo: Set ' navigation ': true,

$ (</