前言

在一些网站中，你可能会看到一种特别的设计，那就是全屏滚动。当你滚动鼠标滚轮时，网页内容会以全屏的形式切换，带来非常酷炫的视觉效果。在本文中，我们将详解如何使用jQuery插件fullPage.js来实现全屏滚动的效果。

引入需要的库和插件

首先，我们需要引入 jQuery 和 fullPage.js 插件。在这段代码中，它们通过 <script> 标签从 CDN 链接中引入。我们还引入了一个可选的 jquery.easings.min.js 插件，这是为了在使用非 CSS3 的情况下提供更多的缓动效果。另一个引入的 scrolloverflow.min.js 插件则是在需要使用 scrollOverflow:true 选项时必须的。

xml 复制代码

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>

初始化 fullPage.js

在页面加载完成后，我们调用 jQuery 的 $(function () {}) 方法，这是一个在 DOM 加载完毕后运行的函数。在这个函数中，我们调用 $("#root").fullpage() 来初始化 fullPage.js。

xml 复制代码

<script>
  $(function () {
    $("#root").fullpage();
    // 调用此方法进行初始化
  });
</script>

这行代码的作用是将 id 为 "root" 的元素（在这个例子中是一个 <div>）转化为全屏滚动的容器。

创建内容区域

接下来，我们在 HTML 中创建了四个 <div> 元素，它们都有一个共同的类名 "section"。这些 <div> 的内容会被 fullPage.js 识别为不同的全屏滚动区域。

xml 复制代码

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

定制样式

最后，我们通过 CSS 定制了这些全屏滚动区域的样式。".section" 类使得每个区域都有相同的宽度和高度，而对 "#root>div:nth-child(n)" 的样式定义则给每个区域设置了不同的背景颜色。

xml 复制代码

<style>
  .section {
    height: 100vh;
    width: 100vw;
  }
  #root>div:nth-child(1){
      background-color: rgb(0, 200, 255);
  }

  #root>div:nth-child(2){
      background-color: rgb(155, 90, 90);
  }

  #root>div:nth-child(3){
      background-color: rgb(54, 17, 17);
  }
  #root>div:nth-child(4){
      background-color: rgb(197, 172, 172);
  }
</style>

到这里，我们的全屏滚动网站就创建完成了。只需在浏览器中打开这个 HTML 文件，然后滚动鼠标滚轮，就可以看到全屏滚动的效果啦~如果有误请指正

全屏滚动的网页实现 - 基于 fullPage.js

前言

引入需要的库和插件

初始化 fullPage.js

创建内容区域

定制样式