余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

jQuery全屏滚动插件fullPage.js(jquery 滚动插件)

xiyangw 2022-12-06 10:03 31 浏览 0 评论

插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松制作出全屏网站。

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

主要功能有:

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">

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

<!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 -->

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

<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->

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

<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">

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

</div>

3、JavaScript

$(function(){

$('#fullpage').fullpage();

});

配置

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、direction 4个参数

相关推荐

Web前端:适合初学者的最佳 JavaScript 项目(普拉提和瑜伽哪个适合初学者)
Web前端:适合初学者的最佳 JavaScript 项目(普拉提和瑜伽哪个适合初学者)

  学习JavaScript或任何其他编程语言的关键需要投入大量时间和精力来开发大量项目,这里有一些最佳JavaScript项目。  1.计算器  这...

2023-03-21 18:28 xiyangw

js快速入门——常用的操作符总结(js ??操作符)

操作符一、递增和递减++--规则:操作数基本数据类型时,转数字后进行运算,转数字失败报NaN操作数引用数据类型时,通过原型链调用toStringvalueOf进行转换后运算,转数字失败报NaN...

JavaScript如何入门?(javascript快速入门教程)
JavaScript如何入门?(javascript快速入门教程)

1,建议阅读“javascript高级程序设计”第三版电子版。(我刚开始学习,我向表哥(软件工程师)说我想做前端,于是,他帮我买了这本书,好的书大家都会推荐,...

2023-03-21 18:28 xiyangw

JavaScript基础知识(一)JS入门(javascript单独写在js文件中)

一、JS入门(一)产生JavaScript是布兰登·艾奇(BrendanEich,1961年~),在1995年利用十天完成JavaScript设计。网景公司最初命名为LiveScript,后来在与Su...

javascript基础入门(java语言自学)

第1天,学习的是js最基本的东西(包括js的组成、数据类型、数据类型转换、NaN和isNaN、隐式类型转换、加减乘除以及取余、变量作用域、闭包简单的概念、命名规范、运算符和逻辑运算符、程序流程控制:...

怎样扎实自己的 JavaScript 基础?(javascript 菜鸟教程)
怎样扎实自己的 JavaScript 基础?(javascript 菜鸟教程)

学习js首先得了解js,他属于一种胶水语言,是依赖于某个宿主环境下的,比如各种浏览器,比如nodejs的v8,js能做什么不能做什么都很依赖于他的宿主给他的ap...

2023-03-21 18:27 xiyangw

JavaScript基础教程新手入门必看(javascript零基础入门书籍)

对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具。毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaS...

初学JavaScript基础知识 掌握JavaScript的组成以及基本语法
初学JavaScript基础知识 掌握JavaScript的组成以及基本语法

为什么学JavaScript?javaScript在网页制作中占有非常重要地位,可以实现验证表单、制作特效等功能,总结起来,学习javascript的目的主要...

2023-03-21 18:26 xiyangw

介绍一下简单易学的编程语言JavaScript(编程 js)
介绍一下简单易学的编程语言JavaScript(编程 js)

#大有学问#JavaScript是一种广泛使用的编程语言,它通常用于在网页中添加交互性和动态内容。JavaScript由Netscape公司在1995年开发,最...

2023-03-21 18:26 xiyangw

前端入门——JavaScript 操作符(前端常用js)

所谓操作符,就是用来操作数据值的符号,在JavaScript中包括算术操作符、位操作符、关系操作符和相等操作符。这些操作符可以操作所有类型的数据,比如字符串、数字、布尔值,甚至对象。一元操作符所谓一元...

带你入门JS的世界,首先需要建立正确的心智模型(一)
带你入门JS的世界,首先需要建立正确的心智模型(一)

转载说明:原创不易,未经授权,谢绝任何形式的转载开篇当我们编写代码时,我们倾向于使用“快速思考系统”,这是一种基于模式匹配和直觉的思考方式。然而,这种思考方式往...

2023-03-21 18:26 xiyangw

10分钟入门javascript函数式编程(什么是函数式编程)

1.函数式编程1.什么是函数式编程函数式编程是?种编程范式,强调使?函数来组合和处理数据。将运算过程抽象成成函数,可以复?。常?的编程范式有:?向过程编程(ProceduralProgrammin...

JavaScript 初学者手册(javascript零基础入门)
JavaScript 初学者手册(javascript零基础入门)

JavaScript是世界上最流行的编程语言之一。我相信这是您第一个绝佳选择的编程语言。我们主要使用JavaScript来创建:网站网络应用使用Node.j...

2023-03-21 18:25 xiyangw

JavaScript零基础入门—JavaScript的BOM(javascript基础入门教程)
JavaScript零基础入门—JavaScript的BOM(javascript基础入门教程)

其实,我们日常开发中,如果不是做前端架构,一般情况下,对BOM的操作其实并不会太多,当然,H5的话也可以借助BOM来定位和判断网络,这个以后再说。对于BOM的操...

2023-03-21 18:25 xiyangw

前端入门——JavaScript 函数(前端function函数的用法)

函数概念说到函数我们首先会想到数学中的函数公式,但是在编程中函数的概念和你想象中的可能有所不同。所谓函数就是一段可以被其它程序引用的代码或程序,可以叫它子程序。函数的作用就是将一个大的系统程序按功能分...

取消回复欢迎 发表评论: