1. fullpage.js的主要功能

fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站

2.引包

CDNJS地址: https://cdnjs.com/libraries/fullPage.js https://links.jianshu.com/go?to=https%3A%2F%2Fcdnjs.com%2Flibraries%2FfullPage.js

3.引入文件及文件依赖关系

fullpage.js插件依赖： fullpage的 css文件， jQuery，如果设置了 options中 css3: false，如果你用除了 jQuery的默认 linear 和 swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library。

引入依赖的文件，注意顺序！

<!--引入fullpage.js插件的样式，必须-->
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- 如果是ie8浏览器或者设置了css3: false 那么需要引入jQuery的easing缓动插件，默认可以省略就行了。 -->
<script src="vendors/jquery.easings.min.js"></script><!--引入jQuery的插件fullpage.js核心文件-->
<script type="text/javascript" src="jquery.fullPage.js"></script>

4.编写页面结构

编写 html的页面结构，每个 section独占一屏幕，默认显示第一屏。

<div id="fullpage"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section">第三屏</div><div class="section">第四屏</div>
</div>

如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。

<div class="section active">第三屏</div>

5.编写初始化的脚本

$(function() {$('#fullpage').fullpage();
});

fullpage中文文档

fullPage.js/lang/chinese at master · alvarotrigo/fullPage.js · GitHubfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - fullPage.js/lang/chinese at master · alvarotrigo/fullPage.jshttps://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs

fullpage设置项

案例1：延迟加载案例：

<!--图片或者视频的延迟加载, 只需要把src改成data-src -->
<img data-src="data:image.png">
<video><source data-src="video.webm" type="video/webm" /><source data-src="video.mp4" type="video/mp4" />
</video>
<!--另外不能在初始化的设置：lazyLoading: true ,不能为false-->

案例2：设置不同屏的背景色

$('#fullpage').fullpage({sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

fullpage的方法

完整案例

 <style>* {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;}.nav {position: fixed;top: 0;left: 0;z-index: 99;display: flex;width: 100%;height: 40px;line-height: 40px;background-color: rgba(0, 0, 0, .3);}.nav li {width: 150px;text-align: center;}.nav li.active {background-color: #f00;}</style>
</head><body><ul class="nav" id="nav"><li class="active" data-menuanchor="first"><a href="#first">第1屏</a></li><li data-menuanchor="second"><a href="#second">第2屏</a></li><li data-menuanchor="third"><a href="#third">第3屏</a></li><li data-menuanchor="fourth"><a href="#fourth">第4屏</a></li></ul><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>
</body>
<!-- <script src="./js/jquery-3.6.1.js"></script>
<script src="./js/fullpage.js"></script> --><script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script>$(function () {$('#fullpage').fullpage({// licenseKey: 'YOUR_KEY_HERE',//收费  需要有认证密钥sectionsColor: ['pink', '#f2f2f2', "#eab", "#b6a"],//每一屏背景色// navigation: true,//分页器是否显示 默认falsenavigationPosition: "right",//分页器位置navigationColor: "#ffffff",//分页器颜色navigationTooltips: ["11", "22", "33", "44"],//项目导航的 tip// slidesNavigation: true,//默认false 是否显示左右滑块的项目导航(轮播图的分页器)slidesNavPosition: "top",//默认bottom 左右滑块的项目导航的位置，可选 top 或 bottomcontrolArrowColor: "#00f",//左右滑块的箭头的背景颜色loopHorizontal: false,//左右滑块是否循环滑动loopBottom: true,loopTop: true,//滚动到最顶部后是否滚底部menu: "#nav",//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动anchors: ["first", "second", "third", "fourth"],//定义锚链接});});
</script>

Jquary全屏滚动插件fullpage.js的使用相关推荐

jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
全屏滚动插件fullPage.js
效果效果本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
js修炼——手写全屏滚动插件
全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维. 如下效果: 接下来看PageSwitch.js ...
html5页面可见xing,【前端资源网页插件】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了类似全屏滚动效果尤其在微信里面我自己开发了一个快速构建此类项目的控件与市面上大部分控件不同的是此控件还支持元素的动画效果并提供多种元素效果基于zepto. ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...

Jquary全屏滚动插件fullpage.js的使用