频道导航

jQuery插件fullPage.js实现全屏滚动效果

2019-01-06 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery插件fullPage.js实现全屏滚动效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法，供大家参考，具体内容如下

0.01 基本演示的HTML 布局以及js 代码

文件文件 //fullPage插件的压缩版本

第一屏

fullPage.js — 基本演示

添加div和slide的样式就可以增加横向点击

第二屏的第一屏

第二屏的第二屏

第二屏的第三屏

第三屏

第四屏

这是最后一屏

0.02 插入背景图片演示的HTML 布局以及js 代码

//需要注意的是这里没有设置颜色而是在css中设置的背景图片0 .section1 { background: url(images/1.jpg) 50%;} .section2 { background: url(images/2.jpg) 50%;} .section3 { background: url(images/3.jpg) 50%;} .section4 { background: url(images/4.jpg) 50%;}

0.03 循环演示 html 布局以及js代码

$(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b','#f90'],//和上面一样 sectionsColor 是设置每一屏的颜色必须用逗号隔开单引号包着 continuousVertical: false,//设置是否滑到底层再往下滚动是第一张图设置true是执行此操作设置false是不执行默认不执行不执行就不设置 }); });

第一屏

fullPage.js — 循环演示

第二屏

第三屏

第四屏

这是最后一屏了，继续往下滚返回第一屏

0.04 回调函数演示

fullPage.js — 回调函数演示 .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -120%;} .section3 p { position: relative; bottom: -120%;} .section4 p { display: none;}

第一屏

fullPage.js — 回调函数演示

第二屏

滚动到第二屏后的回调函数执行的效果

第三屏

滚动到第三屏后的回调函数执行的效果

第四屏

滚动到第四屏后的回调函数执行的效果

0.05 绑定菜单 方法

fullPage.js — 绑定菜单演示_dowebok #menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;} #menu li { float: left; margin: 0 10px 0 0; font-size: 14px;} #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;} #menu .active a { color: #fff; background-color: #333;} .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

第一屏

fullPage.js — 绑定菜单演示

第二屏

请查看左上角，点击可以控制

第三屏

绑定的菜单没有默认的样式，你需要自行编写

第四屏

这是最后一屏

0.06 项目导航演示

$(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b',//设置颜色属性 'navigation': true,//是否显示项目导航默认值是false 需要设置true }); });

第一屏

fullPage.js — 项目导航演示

第二屏

请查看右边的圆圈

第三屏

圆圈还可以设置位置，颜色，加上 tip，点击可以控制

第四屏

这是最后一屏

0.07 自动循环滚动

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

第一屏

第二屏

第三屏

第四屏

0.08 设置横屏的自动播放

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

第一屏

请滚动到第二屏查看

第二屏的第一屏

第二屏的第二屏

第二屏的第三屏

第三屏

第四屏

0.09 判断当前浏览器的宽度小于多少的时候关闭滚动

.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;}

根据可视区域大小启用/关闭全屏滚动效果

如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条

请试着调整浏览器大小并查看滚动条是否出现

第四屏

fullPage.js

是 jQuery 的一个插件，主要功能是制作出全屏网站 fullPage插件的兼容性是兼容IE7浏览器往上其余主流浏览器就不描叙了 fullpage插件支持以下操作

1、插件可以使用鼠标滑轮进行滚动

2、当竖屏的时候支持键盘的上下箭头滚动横屏对照可以使用的是左右箭头

3、能使用多个回调函数制作出动画效果但是需要涉及到jQuery ui的插件连接<在下面有>

4、fullPage 同样也是支持触摸事件如可触摸式笔记本平板手机

5、能在属性操作时使用css3动画但是要注意 css3的兼容性

6、能够自适应屏幕的大小

7、可以设置页面的滚动宽度以及背景颜色是否循环播放可以时候回调函数文本可以设置样式

使用 fullPage中我引用的文件具体如下所示 <必须注意链接顺序先css文件再jQuery 1.8.3版本的然后才是 jQuer ul 或者是 fullPage插件> 注意！所需链接文件可像我留言索要也可寻找自行下载

插件的样式需要链接 // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时必须链接否则出错

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法

jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的...

作者：前端之家时间：2020-12-28

jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery...

作者：前端之家时间：2020-12-28

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容...

作者：前端之家时间：2020-12-28

jQuery效果之jQuery实现图片的依次加载图片

css代码： js代码：

作者：前端之家时间：2020-12-28

jQuery之deferred对象详解

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...

作者：前端之家时间：2020-12-28

jQuery插件开发进阶

jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...

作者：前端之家时间：2020-12-28

jQuery 实现邮箱输入自动提示功能：（一）

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...

作者：前端之家时间：2020-12-28

jQuery插件之上传文件ajaxfileupload.js源码与使用

在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...

作者：前端之家时间：2020-12-28

jQuery效果之封装一个文章图片弹出放大效果

首先先搭写一个基本的格式：然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...

作者：前端之家时间：2020-12-28

《从零开始学习jQuery》：用jQuery操作元素的属性与样式

元素属性和Dom属性简介对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...

作者：前端之家时间：2020-12-28

最新文章