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

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

fullPage全屏滚动

fullPage.js的使用步骤:

一、fullPage.js插件依赖于jquery,所以要在fullPage插件之前引入。

以下使用的是bootcdn中fullPage的cdn,需要放入css、js

<link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet">

<script href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.min.js"></script>

二、编写html代码

默认情况下,每一屏幕的代码都需要有DIV包裹,并且设置DIV的类名为section,默认情况下,第一个setion将作为首页显示在页面上,如你需要某一个setion做为第一屏,则给setion添加类名active。

<div id="fullpage'"> 

    <div class="section">Some section1</div> 

    <div class="section">Some section2</div> 

    <div class="section">Some section3</div>

     <div class="section">Some section4</div> 

</div>

三、初始化fullPage

使用jquery文档加载完毕以后执行函数,初始化fullPage插件

$(document).ready(function() { 

    $('#fullpage').fullpage();

 });

将以上内容放入后,fullPage插件就可正常运行了,全屏滚动效果也实现成功了,看了以上fullPage插件的教程,你是不是也迫不及待的想要使用了呢,根据教程赶快去动手实践吧。

返回列表

相关文章

相关案例