幻灯片/轮播

FullPage 页面全屏滚动插件

创客主机


fullPage.js是一款js页面全屏滚动插件。可轻易创建全屏滚动单页网站。可以和vue.js,react.js和angular.js完美结合使用。fullPage.js兼容所有的现代浏览器,以及一些旧版浏览器,如Internet Explorer 9,Opera 12等都能兼容。 可兼容支持CSS3的浏览器与非支持CSS3的浏览器,适用于旧版浏览器。 同时,手机、平板电脑和触摸屏电脑还提供触屏支持。

使用方法

在页面中引入下面的fullpage.css和fullpage.js文件。

  1. <link rel="stylesheet" type="text/css" href="fullpage.css" />
  2. <!-- 以下行是可选的。 只有在使用选项css3:false,并且您希望使用其他缓动效果,而非“linear”、“swing”或“easeInOutCubic”时才有必要。 -->
  3. <script src="vendors/easings.min.js"></script>
  4. <!-- 以下行仅在使用选项scrollOverflow:true的情况下是必需的 -->
  5. <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
  6. <script type="text/javascript" src="fullpage.js"></script>

HTML结构

HTML文件中的首行HTML代码必须使用HTML DOCTYPE 声明,否则可能会遇到代码段高度问题。HTML 5 doctype中的示例: <!DOCTYPE html> 每个代码段定义为包含section类的元素。 第一个代码段作为主页,是默认激活代码。 代码段应进行封装(即<div id="fullpage"> )。 封装不能是body元素。

  1. <div id="fullpage">
  2.   <div class="section">Some section</div>
  3.   <div class="section">Some section</div>
  4.   <div class="section">Some section</div>
  5.   <div class="section">Some section</div>
  6. </div>

初始化插件

使用纯javascript来初始化。

  1. new fullpage('#fullpage', {
  2.   //options here
  3.   autoScrolling:true,
  4.   scrollHorizontally: true
  5. });
  6.  
  7. //methods
  8. fullpage_api.setAllowScrolling(false);

通过jquery来进行初始化。

  1. $(document).ready(function() {
  2.   $('#fullpage').fullpage({
  3.     //options here
  4.     autoScrolling:true,
  5.     scrollHorizontally: true
  6.   });
  7.  
  8.   //methods
  9.   $.fn.fullpage.setAllowScrolling(false);
  10. });

配置参数

fullPage.js的可用配置参数如下:

  1. var myFullpage = new fullpage('#fullpage', {
  2.   //导航
  3.   menu: '#menu',
  4.   lockAnchors: false,
  5.   anchors:['firstPage', 'secondPage'],
  6.   navigation: false,
  7.   navigationPosition: 'right',
  8.   navigationTooltips: ['firstSlide', 'secondSlide'],
  9.   showActiveTooltip: false,
  10.   slidesNavigation: false,
  11.   slidesNavPosition: 'bottom',
  12.  
  13.   //滚动
  14.   css3: true,
  15.   scrollingSpeed: 700,
  16.   autoScrolling: true,
  17.   fitToSection: true,
  18.   fitToSectionDelay: 1000,
  19.   scrollBar: false,
  20.   easing: 'easeInOutCubic',
  21.   easingcss3: 'ease',
  22.   loopBottom: false,
  23.   loopTop: false,
  24.   loopHorizontal: true,
  25.   continuousVertical: false,
  26.   continuousHorizontal: false,
  27.   scrollHorizontally: false,
  28.   interlockedSlides: false,
  29.   dragAndMove: false,
  30.   offsetSections: false,
  31.   resetSliders: false,
  32.   fadingEffect: false,
  33.   normalScrollElements: '#element1, .element2',
  34.   scrollOverflow: false,
  35.   scrollOverflowReset: false,
  36.   scrollOverflowOptions: null,
  37.   touchSensitivity: 15,
  38.   normalScrollElementTouchThreshold: 5,
  39.   bigSectionsDestination: null,
  40.  
  41.   //可访问
  42.   keyboardScrolling: true,
  43.   animateAnchor: true,
  44.   recordHistory: true,
  45.  
  46.   //设计
  47.   controlArrows: true,
  48.   verticalCentered: true,
  49.   sectionsColor : ['#ccc', '#fff'],
  50.   paddingTop: '3em',
  51.   paddingBottom: '10px',
  52.   fixedElements: '#header, .footer',
  53.   responsiveWidth: 0,
  54.   responsiveHeight: 0,
  55.   responsiveSlides: false,
  56.   parallax: false,
  57.   parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
  58.  
  59.   //自定义选择器
  60.   sectionSelector: '.section',
  61.   slideSelector: '.slide',
  62.  
  63.   lazyLoading: true,
  64.  
  65.   //事件
  66.   onLeave: function(origin, destination, direction){},
  67.   afterLoad: function(origin, destination, direction){},
  68.   afterRender: function(){},
  69.   afterResize: function(width, height){},
  70.   afterResponsive: function(isResponsive){},
  71.   afterSlideLoad: function(section, origin, destination, direction){},
  72.   onSlideLeave: function(section, origin, destination, direction){}
  73. });

Github网址:https://github.com/alvarotrigo/fullPage.js

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!