jQuery全屏滾動外掛程式fullPage.js

標籤：vendor   function   github   javascrip   sde   bottom   class   foo   demo   

github

https://github.com/alvarotrigo/fullPage.js

demo

http://alvarotrigo.com/fullPage/

 

腳手架

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --><script src="vendors/jquery.easings.min.js"></script><!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` --><script type="text/javascript" src="vendors/scrolloverflow.min.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script>

 

所有參數demo

$(document).ready(function() {    $(‘#fullpage‘).fullpage({        //Navigation        menu: ‘#menu‘,        lockAnchors: false,        anchors:[‘firstPage‘, ‘secondPage‘],        navigation: false,        navigationPosition: ‘right‘,        navigationTooltips: [‘firstSlide‘, ‘secondSlide‘],        showActiveTooltip: false,        slidesNavigation: true,        slidesNavPosition: ‘bottom‘,        //Scrolling        css3: true,        scrollingSpeed: 700,        autoScrolling: true,        fitToSection: true,        fitToSectionDelay: 1000,        scrollBar: false,        easing: ‘easeInOutCubic‘,        easingcss3: ‘ease‘,        loopBottom: false,        loopTop: false,        loopHorizontal: true,        continuousVertical: false,        continuousHorizontal: false,        scrollHorizontally: false,        interlockedSlides: false,        dragAndMove: false,        offsetSections: false,        resetSliders: false,        fadingEffect: false,        normalScrollElements: ‘#element1, .element2‘,        scrollOverflow: false,        scrollOverflowOptions: null,        touchSensitivity: 15,        normalScrollElementTouchThreshold: 5,        bigSectionsDestination: null,        //Accessibility        keyboardScrolling: true,        animateAnchor: true,        recordHistory: true,        //Design        controlArrows: true,        verticalCentered: true,        sectionsColor : [‘#ccc‘, ‘#fff‘],        paddingTop: ‘3em‘,        paddingBottom: ‘10px‘,        fixedElements: ‘#header, .footer‘,        responsiveWidth: 0,        responsiveHeight: 0,        responsiveSlides: false,        //Custom selectors        sectionSelector: ‘.section‘,        slideSelector: ‘.slide‘,        lazyLoading: true,        //events        onLeave: function(index, nextIndex, direction){},        afterLoad: function(anchorLink, index){},        afterRender: function(){},        afterResize: function(){},        afterResponsive: function(isResponsive){},        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}    });});

 

jQuery全屏滾動外掛程式fullPage.js