整屏滚动效果插件 fullpage详解

1、引用文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、html部分

<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section"><div class="slide">第三屏的第一屏</div><div class="slide">第三屏的第二屏</div><div class="slide">第三屏的第三屏</div><div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>

3、使用方法

$(document).ready(function() {$.fn.fullpage({slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],anchors: ['page1', 'page2', 'page3', 'page4']});
});

4、详细options参数

参数	类型	说明	默认值
verticalCentered	字符串	内容是否垂直居中	true
resize	布尔值	字体是否随着窗口缩放而缩放	false
slidesColor	函数	设置背景颜色，如：	无
anchors	数组	定义锚链接	无
scrollingSpeed	整数	滚动速度，单位为毫秒	700
easing	字符串	滚动动画方式	easeInQuart
menu	布尔值	绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动	false
navigation	布尔值	是否显示项目导航	false
navigationPosition	字符串	项目导航的位置，可选 left 或 right	right
navigationColor	字符串	项目导航的颜色	#000
navigationTooltips	数组	项目导航的 tip	无
slidesNavigation	布尔值	是否显示左右滑块的项目导航	false
slidesNavPosition	字符串	左右滑块的项目导航的位置，可选 top 或 bottom	bottom
controlArrowColor	字符串	左右滑块的箭头的背景颜色	#fff
loopBottom	布尔值	滚动到最底部后是否滚回顶部	false
loopTop	布尔值	滚动到最顶部后是否滚底部	false
loopHorizontal	布尔值	左右滑块是否循环滑动	true
autoScrolling	布尔值	是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条	true
scrollOverflow	布尔值	内容超过满屏后是否显示滚动条	false
css3	布尔值	是否使用 JavaScript 或 CSS3 transforms 滚动	false
paddingTop	字符串	与顶部的距离	0
paddingBottom	字符串	与底部距离	0
fixedElements	字符串		无
normalScrollElements			无
afterLoad	函数	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算	无
onLeave	函数	滚动前的回调函数，接收 index 和 direction 两个参数，index 是序号，从1开始计算，direction 判断往上滚动还是往下滚动	无
afterRender	函数	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数	无
afterSlideLoad	函数	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数	无
onSlideLeave	函数	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数	无

github 项目地址 https://github.com/alvarotrigo/fullPage.js

文章转载：http://www.dowebok.com/77.html

demo地址：http://works.ibeeger.com/fullpage/

整屏滚动效果插件 fullpage详解相关推荐

fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
logstash过滤器插件filter详解及实例
原创作者:峰哥ge 原创地址: https://www.cnblogs.com/FengGeBlog/p/10305318.html logstash过滤器插件filter grok正则捕获 grok ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
导出jar插件_Fluttify输出的Flutter插件工程详解
系列文章: yohom:Fluttify输出的Flutter插件工程详解zhuanlan.zhihu.com yohom:开发Flutter插件必备原生SDK->Dart接口生成引擎`Flut ...
[logstash-input-log4j]插件使用详解
Log4j插件可以通过log4j.jar获取Java日志,搭配Log4j的SocketAppender和SocketHubAppender使用,常用于简单的集群日志汇总. 最小化的配置 input { ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用自定义jq ...
【机器学习】线性回归实战案例一：多元素情况下广告投放效果分析步骤详解
线性回归实战案例一:多元素情况下广告投放效果分析步骤详解 2 线性回归 2.1 案例一:多元素情况下广告投放效果分析 2.1.1 模块加载与绘图布局样式设置 2.1.2 加载数据和数据筛选 2.1.3 ...

整屏滚动效果插件 fullpage详解

整屏滚动效果插件 fullpage详解相关推荐

最新文章

热门文章