jquery Full-screen scrolling plugin fullpage.js API

jquery Full-screen scrolling plugin fullpage.js API

1, Introduce JS:

true, you need to introduce jquery.slimscroll.min.js, which generally does not require--><script src= "Js/jquery.slimscroll.min.js" ></ Script><script src= "Js/jquery.fullpage.js" ></script>

2. HTML write:

<ul id= "Menu" >    <li data-menuanchor= "Page1" class= "active" ><a href= "#page1" > First screen </a>< /li>    <li data-menuanchor= "Page2" ><a href= "#page2" > Second screen </a></li>    <li Data-menuanchor= "Page3" ><a href= "#page3" > Third screen </a></li>    <li data-menuanchor= "Page4" ><a href= "#page4" > Fourth screen </a></li></ul><div class= "section" >    
3. JavaScript:
<script>// Binding Menu Demo $ (document). Ready (function() {    $.fn.fullpage ({        slidescolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BAABE ', ' #f90 '],        anchors: [' Page1 ', ' page2 ', ' Page3 ', ' Page4 '],        ' #menu '    }) ; </script>
Fullpage.js API Documentation:
1 Configuration21, Options3Verticalcentered stringtruewhether the content is centered vertically4Resize Boolean valuefalsewhether the font is scaled as the window zooms5 slidescolor function No background color set6 anchors array not defined anchor chain connection7Scrollingspeed integer 700scrolling speed in milliseconds8 easing string Easeinquart scrolling animation mode9Menu Boolean valuefalseThe menu can control scrolling after the set of related properties corresponds to the value of the anchors.TenNavigation Boolean valuefalsewhether to show project navigation One Navigationposition String The position of the right item navigation, optional left or right ANavigationcolor string #000Color of Project navigation - navigationtooltips Array Empty item navigation tip -Slidesnavigation Boolean valuefalsewhether to display item navigation for left and right sliders the slidesnavposition string Bottom The position of the item navigation of the left and right slider, optional top or bottom - Controlarrowcolor string #fff The background color of the arrows on the left and right sliders -Loopbottom Boolean valuefalseRoll back to top after scrolling to the bottom -Looptop Boolean valuefalseRoll Bottom after scroll to top +Loophorizontal Boolean valuetruewhether the left and right sliders are circular sliding -Autoscrolling Boolean valuetrueWhether to use the plug-in scrolling mode, if you selectfalse, the browser's own scroll bar will appear +Scrolloverflow Boolean valuefalsewhether the scroll bar is displayed after the content is over full screen ACSS3 Boolean valuefalsewhether to use CSS3 transforms scrolling atPaddingtop string 0the distance from the top -Paddingbottom String 0Distance to bottom - fixedelements String None - normalscrollelements None -Keyboardscrolling Boolean valuetruewhether to use keyboard arrow keys to navigate -Touchsensitivity Integer 5 inContinuousvertical Boolean valuefalsecyclic scrolling, incompatible with looptop and Loopbottom -Animateanchor Boolean valuetrue     toNormalscrollelementtouchthreshold Integer 5 +2, Methods - movesectionup () scroll up the movesectiondown () scroll down * moveTo (section, slide) scroll to $ moveslideright () slide scroll rightPanax Notoginseng moveslideleft () slide scroll left -Setautoscrolling () sets the page scrolling mode, set totrueAuto-Scroll when theSetallowscrolling () Add or remove mouse wheel/trackpad controls + setkeyboardscrolling () Add or remove keyboard direction key control A Setscrollingspeed () defines the scrolling speed in milliseconds the3, callback functions + 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, receive the index, Nextindex, and direction 3 parameters: $ index is the serial number of the "page" leaving, starting from 1; $  - Nextindex is the serial number of the "page" that is scrolled to, starting from 1; -  the direction determines whether to scroll up or down, and the value is up or down.  - Wuyi AfterRender The callback function after the page structure is generated, or the callback function after the page initialization is completed the Afterslideload A callback function that scrolls 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, receives 4 parameters of Anchorlink, index, SlideIndex, direction
jquery Full-screen scrolling plugin fullpage.js API