滚动代码网页(几行代码完工一个全屏滚动网站的库：fullPage.js)

阿兰的部落格

2022-04-27 14:14:44

也不知道从什么时候开始，流行一个页面滚屏，切换不同的文案图片等，来达到酷炫的宣传效果，一般我们可以到一个产品发布的宣传页看到。

那么我们要如何实现全屏滚动切换呢？

首先，我们想到的就是，要通过window.location.hash来切换不同的位置。

今天我们要说的fullPage.js也是这个原理，但是这个库更快更简单的达到我们的目的。

那么fullPage.js是什么？

一个简单易用的库，用来创建全屏滚动的网站（或成单页网站，SPA），它还允许加入一些滑块（比如：左右滑动）等。

那么如何获取它呢？

你可以到GitHub上搜索fullPage，只需要引入一个js库，它只有7kb(gziped)，支持IE8及以上的浏览器。

由于这个是jQuery插件，所以，依存于jQuery1.6版本以上。

那么我们如何使用它呢？

通过上图，我们看到书写的HTML很简单。

滚动代码

JS方面，这样：$("#fullpage").fullpage();就可以了，fullpage({...})可以书写很多配置，比如一些出场进场的效果等，亲可以查阅一下文档（github）。

至此，这个库就介绍完了，有没有想试一把的冲动？有什么问题，也欢迎您评价交流！