Fullpage.js全屏滚动插件使用方法

最新推荐文章于 2024-05-29 09:39:03 发布

陈福国

最新推荐文章于 2024-05-29 09:39:03 发布

阅读量639

点赞数 3

文章标签：陈福国 fullpage fullpage使用全屏插件陈福国fullpage

本文链接：https://blog.csdn.net/qq_45112637/article/details/129874600

版权

1、引入插件文件

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

下载地址：https://github.com/alvarotrigo/fullPage.js
在这里插入图片描述

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>
    <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: green;
        }
    </style>
</head>

<body>
    <div id="fullpage">
        <div class="section active">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>

<script>
    $(document).ready(function () {
        $('#fullpage').fullpage();
    });
</script>

陈福国

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Fullpage.js全屏滚动插件使用方法

默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。下载地址：https://github.com/alvarotrigo/fullPage.js。复制fullpage.css和fullpage.js到项目中。
复制链接

扫一扫