欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > fullPage.js页面全屏滚动插件

fullPage.js页面全屏滚动插件

fullPage.js页面全屏滚动插件

关键词:全屏滚动,翻页插件,fullPage.js,js全屏滚动插件,翻页,js翻页插件,全屏翻页插件,vue全屏翻页插件,全屏滚动翻页插件,jquery库,gongjulei

描述:fullPage.js是一款js页面全屏滚动插件。可轻易创建全屏滚动单页网站。可以和vue.js,react.js和angular.js完美结合使用。

简要教程

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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9616.html

 在线演示  免费下载
编号:201903070000009616
大小:8.21MB
上传时间:2019-03-15 09:01
素材由用户"wanlnalove"上传分享。

标签

最新推荐素材

与fullPage.js页面全屏滚动插件相关的素材

.