文汇软件小编在最近的霖可改版项目里碰见一个全屏滚动的需求,要求是滚动鼠标滑轮时,浏览器的一屏滚动到下一屏,如果通过js的实现还是比较困难的,而且实现起来也比较耗时耗力,所以找到了fullPage.js来实现全屏的滚动。
fullPage.js的使用步骤:
一、fullPage.js插件依赖于jquery,所以要在fullPage插件之前引入。
以下使用的是bootcdn中fullPage的cdn,需要放入css、js
二、编写html代码
默认情况下,每一屏幕的代码都需要有DIV包裹,并且设置DIV的类名为section,默认情况下,第一个setion将作为首页显示在页面上,如你需要某一个setion做为第一屏,则给setion添加类名active。
Some section1
Some section2
Some section3
Some section4
三、初始化fullPage
使用jquery文档加载完毕以后执行函数,初始化fullPage插件
$(document).ready(function() {
$('#fullpage').fullpage();
});
将以上内容放入后,fullPage插件就可正常运行了,全屏滚动效果也实现成功了,看了以上fullPage插件的教程,你是不是也迫不及待的想要使用了呢,根据教程赶快去动手实践吧。