FullPage 页面全屏滚动插件

PetitQ 幻灯片/轮播 2018-12-05 2.94K 0 0

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

使用方法

在页面中引入下面的 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){}

```
});
```

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

FullPage 页面全屏滚动插件

已有 736 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

FullPage 页面全屏滚动插件

使用方法

HTML 结构

初始化插件

配置参数

FullPage 页面全屏滚动插件

相关文章

左右两侧分屏动画图片轮播jQuery特效

带图片倒影jQuery响应式3D旋转木马插件

仿易迅网焦点图片全屏幻灯片jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

HTML 结构

初始化插件

配置参数

FullPage 页面全屏滚动插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复