fullPage.js是一款js页面全屏滚动插件。可轻易创建全屏滚动单页网站。可以和vue.js,react.js和angular.js完美结合使用。
fullPage.js兼容所有的现代浏览器,以及一些旧版浏览器,如Internet Explorer 9,Opera 12等都能兼容。 可兼容支持CSS3的浏览器与非支持CSS3的浏览器,适用于旧版浏览器。 同时,手机、平板电脑和触摸屏电脑还提供触屏支持。
安装
可以通过npm或bower来安装fullPage.js插件。
// 使用bower bower install fullpage.js // 使用npm npm install fullpage.js
使用方法
在页面中引入下面的fullpage.css和fullpage.js文件。
<link rel="stylesheet" type="text/css" href="fullpage.css" /> <!-- 以下行是可选的。 只有在使用选项css3:false,并且您希望使用其他缓动效果,而非“linear”、“swing”或“easeInOutCubic”时才有必要。 --> <script src="vendors/easings.min.js"></script> <!-- 以下行仅在使用选项scrollOverflow:true的情况下是必需的 --> <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage.js"></script>
HTML结构
HTML文件中的首行HTML代码必须使用HTML DOCTYPE 声明,否则可能会遇到代码段高度问题。HTML 5 doctype中的示例: <!DOCTYPE html>
每个代码段定义为包含section类的元素。 第一个代码段作为主页,是默认激活代码。 代码段应进行封装(即<div id="fullpage"> )。 封装不能是body元素。
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
初始化插件
使用纯javascript来初始化。
new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(false);
通过jquery来进行初始化。
$(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false); });
配置参数
fullPage.js的可用配置参数如下:
var myFullpage = new fullpage('#fullpage', { //导航 menu: '#menu', lockAnchors: false, anchors:['firstPage', 'secondPage'], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: 'bottom', //滚动 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, scrollOverflowReset: false, scrollOverflowOptions: null, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, bigSectionsDestination: null, //可访问 keyboardScrolling: true, animateAnchor: true, recordHistory: true, //设计 controlArrows: true, verticalCentered: true, sectionsColor : ['#ccc', '#fff'], paddingTop: '3em', paddingBottom: '10px', fixedElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, responsiveSlides: false, parallax: false, parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'}, //自定义选择器 sectionSelector: '.section', slideSelector: '.slide', lazyLoading: true, //事件 onLeave: function(origin, destination, direction){}, afterLoad: function(origin, destination, direction){}, afterRender: function(){}, afterResize: function(width, height){}, afterResponsive: function(isResponsive){}, afterSlideLoad: function(section, origin, destination, direction){}, onSlideLeave: function(section, origin, destination, direction){} });
fullPage.js插件的github网址为:https://github.com/alvarotrigo/fullPage.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!