fullpage的基本使用方法

最新推荐文章于 2025-03-29 14:58:16 发布

迷失的风景web

最新推荐文章于 2025-03-29 14:58:16 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_44193048/article/details/106321448

版权

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。
主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等（转载）
第一步：
fullpage.js 下载地址
https://github.com/alvarotrigo/fullPage.js
进入下载页面之后点击红色框然后选择第二个选项。
在这里插入图片描述
第二步：
将下载的压缩包进行解压，然后把js和css文件夹放入自己的项目中
第三步：引用js和css文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery-1.8.3.min.js"></script>
<!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

然后就可以正常的使用了。
注意jq的版本必须要在1.8以上。
下面是一个简单的列子：（官方提供的）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css" />
  </head>
  <body>
    <div id="dowebok">
      <div class="section">
        <h3>第一屏</h3>
      </div>
      <div class="section">
        <h3>第二屏</h3>
      </div>
      <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
      </div>
      <div class="section">
        <h3>第四屏</h3>
      </div>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.fullPage.js"></script>
    <script>
      $(function () {
        $("#dowebok").fullpage({
            sectionsColor:['#c2e5ff','#ccc','#7babff','#f40'],
        });
      });
    </script>
  </body>
</html>