
一、解释这个插件的理由
fullPage是一款不错的全屏插件,我自己觉得做全屏滑动插件,一个是swiper,一个是fullPage。
二、fullPage使用
看了一下,我写的再详细,也不如其官方文档详细,下面就把官方文档的地址贴上:
http://www.bootcdn.cn/fullPage.js/readme/
核心说明:
主要配置项下:
$(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, normalScrollElements: '#element1, .element2', scrollOverflow: false, scrollOverflowOptions: null, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, //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, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} }); });
三、本案例说明
本案例是用fullPage模仿百度大事记,有需要的可以下载一下看下!我自己觉得关键还是学会怎么用fullPage,案例只是参考!学会怎么用这个插件,怎么改写这个插件,对我们才更有用!
PREVIOUS:
NEXT: