开始入门 - Fullpage 中文 API 帮助文档

返回介绍

开始入门

发布于 2017-07-15 字数3957 浏览 1371 评论 1

Fullpage是最好用的全屏滚动插件,很多前端设计师用他制作出了优秀的效果,本小节的内容将为大家介绍如何快速的使用Fullpage插件,构建自己的全屏单页网站。

1、安装插件

如果你熟悉bower或者npm,您可以使用下面的命令安装Fullpage

// With bower
bower install fullpage.js
 
// With npm
npm install fullpage.js

当然您也可以从 Fullpage 的Github地址下载得到源文件,这两种方法所获取到的Fullpage插件文件是一样的。

2、引入插件文件

这个插件依赖于jQuery,所以你还需要下载jQuery,并且在Fullpage插件之前引入。

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

如果你需要自定义页面滚动的效果,你需要引入jquery.easings.min.js文件。

<script src="jquery.easings.min.js"></script>

对于内容比较多的页面,可以设置右侧的滚动条,但是默认情况下无法滚动,你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。

<script type="text/javascript" src="jquery.slimscroll.min.js"></script>

最后,如果你不想下载到项目中,您可以使用开源项目CDN服务,Fullpage在CDNJS的地址:https://cdnjs.com/libraries/fullPage.js

3、编写HTML代码

默认情况下,每一屏幕的代码都需要有DIV包裹,并且设置DIV的类名为section,默认情况下,第一个setion将作为首页显示在页面上。

<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>

假如你需要让某一个section作为首页的第一屏展示,你只需要给这个section添加一个active的类,Fullpage会自动优先展示这个屏幕,例如定义下面的代码:

<div class="section active">Some section</div>

Fullpage自带左右滑动的幻灯片,只需要在section中添加DIV元素,并且给DIV元素添加slide类,FUllpage会自动生成幻灯片特效,例如下面的代码:

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

4、初始化Fullpage

使用jQuery的文档加载完毕以后执行函数,初始化Fullpage插件。

$(document).ready(function() {
$('#fullpage').fullpage();
});

所有的选项设置更复杂的初始化可能看起来像这样:

$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
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,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
 
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
 
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
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插件的使用和API文档,请访问 Fullpage 中文文档。

没有了,已经是最后文章

下一篇:初始化参数

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1)

偏爱自由 2017-10-12 00:21:47 1 楼

默认需要配置那些参数呢?