全屏插件的使用

最新推荐文章于 2025-06-03 09:07:40 发布

我的哥哥呦

最新推荐文章于 2025-06-03 09:07:40 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： H5C3 JS 文章标签：全屏插件 current js

本文链接：https://blog.youkuaiyun.com/qq_20497071/article/details/97895268

H5C3 同时被 2 个专栏收录

52 篇文章

订阅专栏

22 篇文章

订阅专栏

本文详细介绍了一种使用HTML、CSS和jQuery实现全屏滚动效果的网页布局方法，通过为不同屏幕添加特定类来改变样式，实现了页面间的平滑过渡，并使用jQuery插件fullPage.js简化了开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first.current h3{
            font-size: 100px;
        }
        /*交集选择器：h3当当前元素同时添加了second和current的时候才会有效果*/
        .second.current h3{
            font-size: 100px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.fullPage.min.js"></script>
</head>
<body>
<div id="dowebok">
    <!--每一个section就是一屏-->
    <div class="section first">
        <h3>第一屏</h3>
    </div>
    <div class="section second">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
    <div class="section">
        <h3>第5屏</h3>
    </div>
</div>
<script>
    $(function(){
        $('#dowebok').fullpage({
            /*设置每一屏的背景色*/
            sectionsColor:["red","green","blue","pink","skyBlue"],
            /*当滚动到某一屏之后调用
            * index:当前屏的索引，索引从1开始*/
            afterLoad:function(anchorLink,index){
                /*将其它屏的current标记移除*/
                $(".section").removeClass("current");
//                alert(index);
                /*添加样式,当滚动到某一屏之后，为元素添加样式--标记*/
                $(".section").eq(index-1).addClass("current");
            }
        });
    });
</script>
</body>
</html>