fullpage得基本使用

Fullpage.js是一个基于jquery的全屏滚动插件，他可以非常方便、很轻松的制作一个全屏网站：

支持鼠标滚动
多个回调函数
支持手机、平板等触摸事件
.支持css3动画
支持窗口缩放
.窗口缩放时自动调整
.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

这个插件基于jQuery，所以你需要引入jQuery，并且在Fullpage插件之前引入需要引入jquery1.6以上的任意版本。

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

自定义页面滚动的效果，引入jquery.easings.min.js文件。

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

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

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

fullPage.js兼容性
jQuery兼容：兼容jQuery1.6以上的版本
浏览器兼容：兼容IE8以上，Chrome，Firefox，Opera，Safari

页面结构：

<div id="fullpage">
<div class="section">something</div>
<div class="section">something</div>
<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>
<div class="section">something</div>
</div>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

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

触发fullpage效果：

<script>$(document).ready(function(){$('#fullpage').fullpage();})
</script>

Fullpage的属性：

.sectionsColor:可以为每一个section设置background-color属性[‘red’,‘green’,‘blue’,‘gray’]
.controlArrows：定义是否通过箭头来控制slide,默认true
verticalCentered:控制每一页的内容是否垂直居中显示，默认为true，
.resize：控制字体是否随窗口缩放而缩放，默认为false
.scrollingSpeed:控制页面滚动速度，默认为700
.easing:定义页面section滚动的动画方式，默认为easeInOutCubic,如果修改此项，需要引入jquery.easings的动画插件，或者是jquery.ui
.css3:是否使用css3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器或者是移动端的效果和速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果（优雅降级）。
.loopTop：滚动到最顶部后是否连续滚动到底部，默认为false
.loopBottom滚动到最底部后是否连续滚回到最顶部，默认为false
.loopHorizontal横向slider幻灯片是否循环滚动，默认为true
.scrollBar：是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条会出现，页面的滚动是按页滚动，但是滚动条的默认行为也有效。
.paddingTop/paddingBottom:设置每一个section页面顶部和底部的padding值，默认为0，
.fixedElements固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不变。
.keyboardScrolling是否可以使用键盘方向键导航，默认值为true
.tochuSensitivity在移动端设备上滑动页面的敏感性，默认为5，是按百分比来衡量的，最高为100，越大则越难滑动
.continuousVertical：页面是否循环滚动，默认为falsecontinuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
.animateAnchor锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
.Navigation是否显示导航，默认为false，如果设置为true会显示小圆点儿，作为导航
.navigationPosition设置导航小圆点的位置可以是left或者right 默认为right
.navigationTooltips导航小圆点的tooltips设置，默认为[]，注意按照顺序设置
.showActiveTooltip是否显示当前导航的tooltip信息，默认是不显示（false）
.slidesNavigation是否显示横向幻灯片的导航，默认是false
.SlidesNavPosition横向幻灯片导航的位置，默认为bottom，可以设置为top或者bottom

Fullpage的回调函数：
1.afterLoad（anchorLink，index）滚动到某一section，且滚动结束后，会触发一次此回调函数。anchorLink是锚链接的名称，index是序号，从1开始计数。
afterLoad:function(anchorLink，index){ }
2.onLeave（index，nextIndex，direction）
index 是离开的“页面”的序号，从1开始计算
nextIndex 是滚动到的“页面”的序号，从1开始计算
direction 判断往上滚动还是往下滚动，值是 up 或 down
通过return false可以取消滚动
3.afterRender（）页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
4.afterResize（）浏览器窗口尺寸发生改变之后的回调函数
5.afterSlideLoad（anchorLink，index，slideAnchor，slideIndex）滚动到某一幻灯片发生的回调函数，
6.onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）在我们离开一个slide时，会触发一次此回调函数，，

fullpage得基本使用相关推荐

fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
fullpage的应用
2019独角兽企业重金招聘Python工程师标准>>> 先记录代码: HTML部分: <!DOCTYPE html> <html lang="en&quo ...
fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...
使用fullPage做的大图片全屏滚动
本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset ...
转【FullPage.js 应用参数参考与简单调用】
简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站 ...
Fullpage参数说明
参数说明 $(document).ready(function() {$('#fullpage').fullpage({//Navigationmenu: false,//绑定菜单,设定的相关属性与a ...
【转载】fullpage.js学习
参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo 一.简介 fullPage.js 是一个基于jQuery的插件,它能 ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...

fullpage得基本使用

fullpage得基本使用相关推荐

最新文章

热门文章