兼容性:

  1. 支持 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用法总结的更多相关文章

  1. fullPage.js插件用法(转发)

    fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...

  2. FullPage.js全屏滚动插件

    一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...

  3. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  4. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  5. 高端大气上档次的fullPage.js

    简介 4月15日,网易邮箱升级到6.0版本,并发布了介绍页面,页面采用了时下非常流行的"全屏"效果,文字.图片再加上 CSS3 动画,让用户非常直观.清晰的了解6.0版本的功能及特 ...

  6. fullPage.js学习笔记

    中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html  上面有详细介绍及案例展示,很不错哦,可以先去看看 ...

  7. xss其他标签下的js用法总结大全

    前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓           Default <script src=js地址></script> 1 <scr ...

  8. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

  9. 制作手机相册 全屏滚动插件fullpage.js

    今天是端午自己做了一个小的送祝福链接  这里用到了fullpage插件 $('#container').fullpage({ navigation: false,        //navigatio ...

随机推荐

  1. iOS 14.5 有啥新功能?Apple Watch 也能解锁 iPhone 了

    转: iOS 14.5 有啥新功能?Apple Watch 也能解锁 iPhone 了 苹果今天发布了即将发布的 iOS 14.5 和 iPadOS 14.5 更新的第一个 Beta 版本,我们在其中 ...

  2. 使用Tomcat30分钟搭建个人服务器

    目录 一.服务器简介 二.安装教程 三.出现的问题 一.服务器简介 Tomcat服务器是一个Apache软件资金会的开源项目,实现了Servlet,JSP,EL,WebSocket协议. 二.安装教程 ...

  3. Oracle VM VirtualBox下创建CentOS虚拟系统

    下载镜像 创建虚拟电脑 点击新建,输入服务器命名(根据自己喜好),选择好类型和版本(我下载的是64位的CentOS系统,所以选择类型为Linux,版本为其他版本). 修改内存大小 系统建议为512M, ...

  4. WEB服务-Nginx之十-keepalived

    WEB服务-Nginx之10-keepalived 目录 WEB服务-Nginx之10-keepalived Keepalived和高可用 基本概述 Keepalived安装配置 Keepalived ...

  5. 漏洞复现-2.x rce-Thinkphp远程命令执行

                0x00实验环境 攻击机:win10 靶机:Ubuntu18 (docker搭建的vulhub靶场) 0x01影响版本 影响Thinkphp 2.x的版本 0x02实验目的 学 ...

  6. CVE-2019-12409-Apache Solr JMX服务远程代码执行

    漏洞分析 https://www.freebuf.com/vuls/218730.html 漏洞介绍 该漏洞源于默认配置文件solr.in.sh中的ENABLE_REMOTE_JMX_OPTS配置选项 ...

  7. Java BasicNameValuePair怎么传数组类型的参数?

    BasicNameValuePair 传数组的话可以这样传 map.put("ids[]", 1); map.put("ids[]", 2);

  8. 2019 GDUT Rating Contest I : Problem B. Teamwork

    题面: 传送门 B. Teamwork Input file: standard input Output file: standard output Time limit: 1 second Memor ...

  9. python类属性

    类属性 类属性分为共有属性和私有属性. 私有属性的定义方法eg:__age(若无次定义则默认为公有属性) 类属性举例: class people: name = "china" _ ...

  10. 2018ICPC南京 A. Adrien and Austin

    题目: 题意:1-N个石子每次只能取连续的1-K个问输赢.(一开始以为只是个简简单单的巴什游戏,激动的提交了一发wr了,再读了一遍题才发现是只能取连续的) 题解:当n==0或者k==1&&am ...