JQuery实现电梯导航特效

越陌度阡

发布于 2022-11-27 09:37:17

5.4K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

分享一个基于JQuery实现的电梯导航效果，效果如下：

以下是代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>基于JQuery实现电梯导航特效</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: 'microsoft yahei';
        }

        #stepNav {
            width: 35px;
            position: fixed;
            top: 100px;
            left: 50px;
            border: 1px solid #ddd;
            display: none;

        }

        #stepNav ul li {
            width: 35px;
            height: 32px;
            border-bottom: 1px dotted #DDDDDD;
            list-style: none;
            font-size: 12px;
            text-align: center;
            position: relative;
            cursor: pointer;
            padding: 10px 0;
            background: #918888;
            color: #fff;
        }

        #stepNav ul li span {
            width: 35px;
            height: 32px;
            padding: 10px 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        #stepNav ul li.last {
            background: #5e4a4a;
            color: #fff;
            border-bottom: 1px solid #ddd;
        }

        #stepNav ul li.active span {
            background: #c00;
            color: #fff;
            display: block;
        }

        #stepNav ul li:hover span {
            background: #c00;
            color: #fff;
            display: block;
        }

        #header {
            width: 1000px;
            height: 1000px;
            background: #cc6633;
            margin: 0 auto;
            font-size: 50px;
            line-height: 1000px;
            text-align: center;
            color: #000;
        }

        #main {
            width: 1000px;
            background: #66ff66;
            margin: 0 auto;
        }

        #main .step {
            height: 600px;
            width: 1000px;
            font-size: 50px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 600px;
        }

        #footer {
            width: 1000px;
            height: 400px;
            background: red;
            margin: 0 auto;
            font-size: 50px;
            line-height: 400px;
            text-align: center;
            color: #000;
        }
    </style>
</head>

<body>
    <div id="stepNav">
        <ul>
            <li class="active">
                <span>享品质</span>
            </li>
            <li>
                <span>服饰美妆</span>
            </li>
            <li>
                <span>电脑数码</span>
            </li>
            <li>
                <span>3C运动</span>
            </li>
            <li>
                <span>爱吃</span>
            </li>
            <li>
                <span>母婴居家</span>
            </li>
            <li>
                <span>图书汽车</span>
            </li>
            <li>
                <span>虚拟</span>
            </li>
            <li>
                <span>还没逛够</span>
            </li>
            <li class="last">顶部</li>
        </ul>
    </div>
    <div id="header">
        向下滚动鼠标查看效果
    </div>
    <div id="main">
        <div class="step" style="background: #cc0033;">
            享品质
        </div>
        <div class="step" style="background: #999933;">
            服饰美妆
        </div>
        <div class="step" style="background: #ccff33;">
            电脑数码
        </div>
        <div class="step" style="background: #006633;">
            3C运动
        </div>
        <div class="step" style="background: #6666cc;">
            爱吃
        </div>
        <div class="step" style="background: #ff6600;">
            母婴居家
        </div>
        <div class="step" style="background: #ffff00;">
            图书汽车
        </div>
        <div class="step" style="background: #3333ff;">
            虚拟
        </div>
        <div class="step" style="background: #ff00cc;">
            还没逛够
        </div>
    </div>
    <div id="footer">
        网站底部
    </div>


    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>


    <script>
        $(function () {
            $(window).on('scroll', function () {
                var $scroll = $(this).scrollTop();

                // 显示楼层标签
                if ($scroll >= 800) {
                    $('#stepNav').show();
                } else {
                    $('#stepNav').hide();
                }

                // 拖动滚轮，点亮对应的楼层标签
                $('.step').each(function () {
                    var $stepTop = $('.step').eq($(this).index()).offset().top + 400;
                    // 楼层的top大于滚动条的距离
                    if ($stepTop > $scroll) {
                        $('#stepNav li').removeClass('active');
                        $('#stepNav li').eq($(this).index()).addClass('active');
                        // 中断循环
                        return false;
                    }
                });
            });

            // 获取每个楼梯的offset().top，点击楼层让对应的内容模块移动到对应的位置  
            var $stepItem = $('#stepNav li').not('.last');
            $stepItem.on('click', function () {
                $(this).addClass('active').siblings('li').removeClass('active');
                var $stepTop = $('.step').eq($(this).index()).offset().top;
                // 获取每个楼梯的offsetTop值
                $('html,body').animate({
                    scrollTop: $stepTop
                })
            });

            // 回到顶部
            $('.last').on('click', function () {
                $('html,body').animate({
                    scrollTop: 0
                })
            });
        })
    </script>
</body>

</html>