jQuery全屏滚动插件fullPage，CSS块元素

作者：System 时间：2024年08月15日分类：所有,jquery 字数：1233




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动示例</title>
    <link rel="stylesheet" href="path/to/jquery.fullPage.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #fullpage {
            height: 100%;
        }
        .section {
            width: 100%;
            height: 100vh;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section">第一页</div>
        <div class="section">第二页</div>
        <div class="section">第三页</div>
        <div class="section">第四页</div>
    </div>
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.fullPage.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage();
        });
    </script>
</body>
</html>

这个代码示例展示了如何使用jQuery fullPage插件创建一个简单的全屏滚动网站。它包括了引入必要的CSS和JavaScript文件，定义了一个包含四个部分的全屏网站，并初始化了fullPage插件。每个部分都是一个CSS块元素，并通过vh单位自动占满全屏。

jQuery全屏滚动插件fullPage，CSS块元素

评论已关闭

推荐阅读