fullpage.js用法总结
兼容性:
- 支持 IE8+ 及其他现代浏览器。
主要功能:
1.支持鼠标滚动;
2.支持前进后退键盘控制;
3.多个回调函数;
4.支持手机.移动设备;
5.支持窗口缩放自动调整;
6.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等;
7.支持CSS3动画;
实现方法:
1.插入jquery.fullPage.css;
2.插入jquery.js;
3.插入jquery-ui.js;(用于制作动画)
4.插入jquery.fullpage.js;
<link rel="stylesheet" href="jquery.fullPage.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.fullPage.js"></script>
HTML:
如果你想定义一个不同的出发点,而不是一段或一部分的第一个幻灯片,只需添加active section,并放在你想加载幻灯片位置前。
为了在一个幻灯片内进行扩展另外的横向幻灯片,每个幻灯片将定义一个div。
<body>
2 <div id="fullpage">
3 <div class="section s1">
4 <img src="img/bc8.jpg" alt="">
5 </div>
6 <div class="section s2">
7 <img src="img/bc8.jpg" alt="">
8 </div>
9 <div class="section s3">
10 <img src="img/bc8.jpg" alt="">
11 </div>
12 <div class="section s4">
13 <img src="img/bc8.jpg" alt="">
14 </div>
15 <div class="section s5">
16 <img src="img/bc8.jpg" alt="">
17 </div>
18 </div>
19 </body>
javaScript:
<script>
2 $(function(){
3 $('#fullpage').fullpage({
4 navigation:'true'
5 });
6 });
7 </script>
配置表:
1.选项
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
verticalCentered | 字符串 | true | 内容是否垂直居中 |
resize | 布尔值 | false | 字体是否随着窗口缩放而缩放 |
slidesColor | 函数 | 无 | 设置背景颜色 |
anchors | 数组 | 无 | 定义锚链接 |
scrollingSpeed | 整数 | 700 | 滚动速度,单位为毫秒 |
easing | 字符串 | easeInQuart | 滚动动画方式 |
menu | 布尔值 | false | 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动 |
navigation | 布尔值 | false | 是否显示项目导航 |
navigationPosition | 字符串 | right | 项目导航的位置,可选 left 或 right |
navigationColor | 字符串 | #000 | 项目导航的颜色 |
navigationTooltips | 数组 | 空 | 项目导航的 tip |
slidesNavigation | 布尔值 | false | 是否显示左右滑块的项目导航 |
slidesNavPosition | 字符串 | bottom | 左右滑块的项目导航的位置,可选 top 或 bottom |
controlArrowColor | 字符串 | #fff | 左右滑块的箭头的背景颜色 |
loopBottom | 布尔值 | false | 滚动到最底部后是否滚回顶部 |
loopTop | 布尔值 | false | 滚动到最顶部后是否滚底部 |
loopHorizontal | 布尔值 | true | 左右滑块是否循环滑动 |
autoScrolling | 布尔值 | true | 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 |
scrollOverflow | 布尔值 | false | 内容超过满屏后是否显示滚动条 |
css3 | 布尔值 | false | 是否使用 CSS3 transforms 滚动 |
paddingTop | 字符串 | 0 | 与顶部的距离 |
paddingBottom | 字符串 | 0 | 与底部距离 |
fixedElements | 字符串 | 无 | |
normalScrollElements | 无 | ||
keyboardScrolling | 布尔值 | true | 是否使用键盘方向键导航 |
touchSensitivity | 整数 | 5 | |
continuousVertical | 布尔值 | false | 是否循环滚动,与 loopTop 及 loopBottom 不兼容 |
animateAnchor | 布尔值 | true | |
normalScrollElementTouchThreshold | 整数 | 5 |
2.方法:
- moveSectionUp() 向上滚动
- moveSectionDown() 向下滚动
- moveTo(section, slide) 滚动到
- moveSlideRight() slide 向右滚动
- moveSlideLeft() slide 向左滚动
- setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动
- setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
- setKeyboardScrolling()添加或删除键盘方向键控制
- setScrollingSpeed() 定义以毫秒为单位的滚动速度
3、回调函数
名称 | 说明 |
---|---|
afterLoad | 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算 |
onLeave | 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算; direction 判断往上滚动还是往下滚动,值是 up 或 down。 |
afterRender | 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 |
afterSlideLoad | 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数 |
onSlideLeave | 某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、directi |
http://www.dowebok.com/77.html
fullpage.js用法总结的更多相关文章
- fullPage.js插件用法(转发)
fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...
- FullPage.js全屏滚动插件
一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- [转载]fullPage.js中文api 配置参数~
fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...
- 高端大气上档次的fullPage.js
简介 4月15日,网易邮箱升级到6.0版本,并发布了介绍页面,页面采用了时下非常流行的"全屏"效果,文字.图片再加上 CSS3 动画,让用户非常直观.清晰的了解6.0版本的功能及特 ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- xss其他标签下的js用法总结大全
前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓ Default <script src=js地址></script> 1 <scr ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
随机推荐
- iOS 14.5 有啥新功能?Apple Watch 也能解锁 iPhone 了
转: iOS 14.5 有啥新功能?Apple Watch 也能解锁 iPhone 了 苹果今天发布了即将发布的 iOS 14.5 和 iPadOS 14.5 更新的第一个 Beta 版本,我们在其中 ...
- 使用Tomcat30分钟搭建个人服务器
目录 一.服务器简介 二.安装教程 三.出现的问题 一.服务器简介 Tomcat服务器是一个Apache软件资金会的开源项目,实现了Servlet,JSP,EL,WebSocket协议. 二.安装教程 ...
- Oracle VM VirtualBox下创建CentOS虚拟系统
下载镜像 创建虚拟电脑 点击新建,输入服务器命名(根据自己喜好),选择好类型和版本(我下载的是64位的CentOS系统,所以选择类型为Linux,版本为其他版本). 修改内存大小 系统建议为512M, ...
- WEB服务-Nginx之十-keepalived
WEB服务-Nginx之10-keepalived 目录 WEB服务-Nginx之10-keepalived Keepalived和高可用 基本概述 Keepalived安装配置 Keepalived ...
- 漏洞复现-2.x rce-Thinkphp远程命令执行
0x00实验环境 攻击机:win10 靶机:Ubuntu18 (docker搭建的vulhub靶场) 0x01影响版本 影响Thinkphp 2.x的版本 0x02实验目的 学 ...
- CVE-2019-12409-Apache Solr JMX服务远程代码执行
漏洞分析 https://www.freebuf.com/vuls/218730.html 漏洞介绍 该漏洞源于默认配置文件solr.in.sh中的ENABLE_REMOTE_JMX_OPTS配置选项 ...
- Java BasicNameValuePair怎么传数组类型的参数?
BasicNameValuePair 传数组的话可以这样传 map.put("ids[]", 1); map.put("ids[]", 2);
- 2019 GDUT Rating Contest I : Problem B. Teamwork
题面: 传送门 B. Teamwork Input file: standard input Output file: standard output Time limit: 1 second Memor ...
- python类属性
类属性 类属性分为共有属性和私有属性. 私有属性的定义方法eg:__age(若无次定义则默认为公有属性) 类属性举例: class people: name = "china" _ ...
- 2018ICPC南京 A. Adrien and Austin
题目: 题意:1-N个石子每次只能取连续的1-K个问输赢.(一开始以为只是个简简单单的巴什游戏,激动的提交了一发wr了,再读了一遍题才发现是只能取连续的) 题解:当n==0或者k==1&&am ...