首页 前端知识 jQuery全屏滚动插件fullPage.js的使用

jQuery全屏滚动插件fullPage.js的使用

2024-11-04 10:11:33 前端知识 前端哥 812 46 我要收藏

1、引入插件文件

这个插件依赖于jQuery,所以你还需要下载jQuery,并且在Fullpage插件之前引入。

下载地址:https://github.com/alvarotrigo/fullPage.js  复制地址在浏览器打开去下载

下一步,打开code  local download,下载下来

2、解压压缩包,找到dist文件夹

复制fullpage.css和fullpage.js到项目中

 

3、引入项目


 <link rel="stylesheet" href="./css/fullpage.css">
 <script src="./js/jquery-1.8.3.min.js"></script>
 <script src="./js/fullpage.js"></script>

4、编写HTML代码

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1.引入依赖和样式 -->
    <link rel="stylesheet" href="./css/fullpage.css" />
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/fullpage.js"></script>

    <style>
      .active {
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div id="fullpage">
      <!--2. 默认情况下 每一屏的代码都要有一个div包裹,且类名为section 滚动到哪一屏,对应的有个.active -->
      <div class="section">Some section_1</div>
      <div class="section">Some section_2</div>
      <div class="section">Some section_3</div>
      <div class="section">Some section_4</div>
    </div>
  </body>
</html>
<!-- 3.书写fullpage.js的初始化代码 -->
<script>
  $(document).ready(function () {
    $("#fullpage").fullpage();
  });
</script>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19921.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!