咨询电话:
15628812133
07
2019/09

fullPage.js轻松实现全屏网站滚动

发布时间:2019-09-07 17:59:56
发布者:不要怕
浏览量:
0

文汇软件小编在最近的霖可改版项目里碰见一个全屏滚动的需求,要求是滚动鼠标滑轮时,浏览器的一屏滚动到下一屏,如果通过js的实现还是比较困难的,而且实现起来也比较耗时耗力,所以找到了fullPage.js来实现全屏的滚动。

fullPage全屏滚动

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插件的教程,你是不是也迫不及待的想要使用了呢,根据教程赶快去动手实践吧。

返回列表