温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用JQuery实现电梯导航效果

发布时间:2022-07-25 09:24:52 阅读:183 作者:栢白 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天小编给大家分享的是如何使用JQuery实现电梯导航效果,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。

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

如何使用JQuery实现电梯导航效果

以下是代码实现:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <title>基于JQuery实现电梯导航特效</title>
    <style type="text/css">
        * {
            margin0;
            padding0;
            font-family'microsoft yahei';
        }
 
        #loutinav {
            width35px;
            position: fixed;
            top100px;
            left50px;
            border1px solid #ddd;
            display: none;
 
        }
 
        #loutinav ul li {
            width35px;
            height32px;
            border-bottom1px dotted #DDDDDD;
            list-style: none;
            font-size12px;
            text-align: center;
            position: relative;
            cursor: pointer;
            padding10px 0;
            background#918888;
            color#fff;
        }
 
        #loutinav ul li span {
            width35px;
            height32px;
            padding10px 0;
            position: absolute;
            top0;
            left0;
        }
 
        #loutinav ul li.last {
            background#5e4a4a;
            color#fff;
            border-bottom1px solid #ddd;
        }
 
        #loutinav ul li.active span {
            background#c00;
            color#fff;
            display: block;
        }
 
        #loutinav ul li:hover span {
            background#c00;
            color#fff;
            display: block;
        }
 
        #header {
            width1000px;
            height1000px;
            background#cc6633;
            margin0 auto;
            font-size50px;
            line-height1000px;
            text-align: center;
            color#000;
        }
 
        #main {
            width1000px;
            background#66ff66;
            margin0 auto;
        }
 
        #main .louti {
            height600px;
            width1000px;
            font-size50px;
            color#fff;
            font-weight: bold;
            text-align: center;
            line-height600px;
        }
 
        #footer {
            width1000px;
            height400px;
            background: red;
            margin0 auto;
            font-size50px;
            line-height400px;
            text-align: center;
            color#000;
        }
    </style>
</head>
 
<body>
    <div id="loutinav">
        <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="louti" >
            享品质
        </div>
        <div class="louti" >
            服饰美妆
        </div>
        <div class="louti" >
            电脑数码
        </div>
        <div class="louti" >
            3C运动
        </div>
        <div class="louti" >
            爱吃
        </div>
        <div class="louti" >
            母婴居家
        </div>
        <div class="louti" >
            图书汽车
        </div>
        <div class="louti" >
            虚拟
        </div>
        <div class="louti" >
            还没逛够
        </div>
    </div>
    <div id="footer">
        网站底部
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $(window).on('scroll'function () {
                var $scroll = $(this).scrollTop();
                // 显示楼层标签
                if ($scroll >= 800) {
                    $('#loutinav').show();
                } else {
                    $('#loutinav').hide();
                }
 
                // 拖动滚轮,点亮对应的楼层标签
                $('.louti').each(function () {
                    var $loutitop = $('.louti').eq($(this).index()).offset().top + 400;
                    // 楼层的top大于滚动条的距离
                    if ($loutitop > $scroll) {
                        $('#loutinav li').removeClass('active');
                        $('#loutinav li').eq($(this).index()).addClass('active');
                        // 中断循环
                        return false;
                    }
                });
            });
 
            // 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置  
            var $loutili = $('#loutinav li').not('.last');
            $loutili.on('click'function () {
                $(this).addClass('active').siblings('li').removeClass('active');
                var $loutitop = $('.louti').eq($(this).index()).offset().top;
                // 获取每个楼梯的offsetTop值
                // $('html,body')兼容问题body属于chrome
                $('html,body').animate({
                    scrollTop: $loutitop
                })
            });
 
            // 回到顶部
            $('.last').on('click'function () {
                // $('html,body')兼容问题body属于chrome
                $('html,body').animate({
                    scrollTop0
                })
            });
 
        })
    </script>
</body>
 
</html>

关于如何使用JQuery实现电梯导航效果就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×