JQuery跑楼梯仿京东商城小案例，小白教程

最新推荐文章于 2024-10-20 17:24:43 发布

wbw五十度灰

最新推荐文章于 2024-10-20 17:24:43 发布

阅读量201

点赞数 2

分类专栏： JQuery基础 jquery小案例文章标签： html jquery javascript css html5

本文链接：https://blog.csdn.net/m0_51095089/article/details/111500716

版权

JQuery基础同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery小案例

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个使用JQuery仿照京东商城创建楼梯效果的小案例，适合初学者学习。通过HTML、CSS和JavaScript的结合，详细阐述了实现过程。

摘要由CSDN通过智能技术生成

今天公司项目完成，没什么事，应小粉丝要求，写一个仿京东商城小楼梯案例，欢迎各位小伙伴共同讨论。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #menu{
            position: fixed;
            top: 25%;
            left: 40px;
            width: 30px;
            border: 1px solid;
        }
        #menu ul li {
            position: relative;
            width: 30px;
            height: 30px;
            list-style: 30px;
            list-style: none;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            cursor: pointer;
            border-bottom: 1px dotted #aaaaaa;
        }
        #menu ul li.last{
            background: #ccc;
            color: black;
            border-bottom:none ;
        }
        #menu ul li span{
            display: none;
            width: 30px;
            height: 30px;
            position: relative;
            top: 0;
            left: 0;
            color: red;
        }
        #menu ul li:hover span{
            display: block;
            background: darkred;
            color: white;
        }
        #menu ul li span.active{
            display: block;
            background:darkred ;
            color:white ;
        }
        #menu ul li:hover span.active {
            display: block;
            background: darkred;
            color: white;
        }
        #header,
        #main,
        #footer{
            margin: auto;
            width: 1000px; 
            text-align: center;
            font-size: 40px;
            font-weight:bold ;
            line-height: 500px;
        }
        #main div{
            height: 700px;
            font-size: 50px;
            color: honeydew;
            line-height:700px ;
        }
        #header{
            height: 500px;
            background: #ccc;
        }
        #footer{
            height:500px ;
            background: #ccc;
        }
    </style>
    <script src="./jquery-3.5.1.js"></script>
</head>
<body>
    <div id="menu">
        <ul>
            <li>1F<span>服饰</span></li>
            <li>2F<span>美妆</span></li>
            <li>3F<span>手机</span></li>
            <li>4F<span>家电</span></li>
            <li>5F<span>数码</span></li>
            <li>6f<span>运动</span></li>
            <li>7F<span>居家</span></li>
            <li>8F<span>母婴</span></li>
            <li>9F<span>食品</span></li>
            <li>10F<span>图书</span></li>
            <li>11F<span>服务</span></li>
            <li class="last">top</li>
        </ul>
    </div>
    <div id="header">头部</div>
    <div id="main">
        <div class="Louti" style="background:bisque ;">服饰</div>
        <div class="Louti" style="background:yellow;">美妆</div>
        <div class="Louti" style="background:red;">手机</div>
        <div class="Louti" style="background:gold;"></div>
         <div class="Louti" style="background:yellowgreen;">运动</div>
        <div class="Louti" style="background:purple;">居家</div>
        <div class="Louti" style="background:blueviolet;">母婴</div>
        <div class="Louti" style="background:blue">食品</div>
        <div class="Louti" style="background:orange ;">图书</div>
        <div class="Louti" style="background:greenyellow ;">服务</div>
    </div>
    <div id="footer">尾部</div>
    <script>
        $("#menu ul li:not(:last)").click(function(){
            $(this).find("span")
            .addClass("active")
            .end()
            .siblings()
            .find("span")
            .removeClass("active");
            var sTop = $(".Louti").eq($(this).index()).offset().top;
            $("body,html").animate({
                "scrollTop":sTop
            },1000);
        })
        $(".last").click(function(){
            $("body,html").animate({
                "scrollTop":0
            },1000);
            $("#menu li span").removeClass("active");
        })

        $(window).scroll(function(){
            var sTop = $(document).scrollTop();
            var sTop = $(document).scrollTop();
            var $floor = $(".Louti").filter(function () {

            // console.log('div:'+$(this).height())
                    return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
            })
            $("#menu li").eq($floor.index())
                    .find("span")
                    .addClass("active")
                    .end()
                    .siblings()
                    .find("span")
                    .removeClass("active");
                
        })
    </script>
</body>
</html>