fullPage.js 项目教程

2026-01-16 09:20:43作者：薛曦旖Francesca

目录结构及介绍

fullPage.js 是一个用于创建全屏滚动网站的 JavaScript 库。以下是其基本目录结构及介绍：

fullPage.js/
├── dist/
│   ├── fullpage.css
│   ├── fullpage.extensions.min.js
│   ├── fullpage.js
│   └── fullpage.min.js
├── examples/
│   ├── examples.css
│   ├── examples.js
│   └── index.html
├── src/
│   ├── fullpage.js
│   └── fullpage.scss
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

dist/：包含编译后的文件，如 fullpage.css、fullpage.js 和 fullpage.min.js。
examples/：包含示例文件，用于展示 fullPage.js 的使用方法。
src/：包含源代码文件，如 fullpage.js 和 fullpage.scss。
.gitignore、.npmignore、.travis.yml：用于版本控制和持续集成的配置文件。
CHANGELOG.md、CONTRIBUTING.md、LICENSE、README.md：项目文档和许可证信息。
package.json：项目的依赖和脚本配置。
webpack.config.js：用于构建项目的 Webpack 配置文件。

项目的启动文件介绍

fullPage.js 的启动文件主要是 dist/ 目录下的文件，特别是 fullpage.js 和 fullpage.min.js。这些文件包含了 fullPage.js 的核心功能，可以直接在 HTML 文件中引用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fullPage.js 示例</title>
    <link rel="stylesheet" href="dist/fullpage.css">
</head>
<body>
    <div id="fullpage">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">第三屏</div>
    </div>
    <script src="dist/fullpage.js"></script>
    <script>
        new fullpage('#fullpage', {
            // 配置选项
            autoScrolling: true,
            scrollHorizontally: true
        });
    </script>
</body>
</html>

项目的配置文件介绍

fullPage.js 的配置选项可以在初始化时通过 JavaScript 对象传递。以下是一些常用的配置选项：

new fullpage('#fullpage', {
    // 自动滚动
    autoScrolling: true,
    // 水平滚动
    scrollHorizontally: true,
    // 响应式宽度
    responsiveWidth: 900,
    // 响应式高度
    responsiveHeight: 600,
    // 懒加载
    lazyLoading: true,
    // 扩展
    extensions: ['scrollOverflow']
});