demo-楼梯

最新推荐文章于 2024-08-07 00:06:23 发布

咩有猫腻.

最新推荐文章于 2024-08-07 00:06:23 发布

阅读量218

点赞数

分类专栏： demo jQuery

本文链接：https://blog.csdn.net/DcTbnk/article/details/106764614

版权

jQuery 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

demo

15 篇文章 0 订阅

订阅专栏

一.老师写的

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      body,
      ul,
      li {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      #floorNav {
        display: none;
        position: fixed;
        top: 100px;
        left: 50px;
        width: 32px;
        border: 1px solid #cecece;
      }
      #floorNav li {
        position: relative;
        width: 32px;
        height: 32px;
        border-bottom: 1px solid #cecece;
        text-align: center;
        line-height: 32px;
        font-size: 12px;
      }

      #floorNav span {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        background: red;
        color: white;
      }

      #floorNav li:hover span,
      #floorNav li.hover span {
        display: block;
      }

      #floorNav li:last-child {
        background: red;
        color: white;
        border-bottom: none;
      }
      #header,
      #footer {
        width: 1000px;
        height: 1000px;
        background: darkgoldenrod;
        margin: 0 auto;
      }
      #content {
      }
      #content li {
        width: 1000px;
        height: 600px;
        margin: 0 auto;
        font-size: 40px;
        text-align: center;
        line-height: 600px;
      }
    </style>
  </head>

  <body>
    <div id="floorNav">
      <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>TOP</li>
      </ul>
    </div>
    
    <div id="header"></div>
    <div id="content">
      <ul>
        <li style="background: #8b0000;">服饰</li>
        <li style="background: #123;">美妆</li>
        <li style="background: #667;">手机</li>
        <li style="background: #558;">家电</li>
        <li style="background: #900;">数码</li>
        <li style="background: #456;">运动</li>
        <li style="background: #789;">居家</li>
        <li style="background: #234;">母婴</li>
        <li style="background: #567;">食品</li>
        <li style="background: #887;">图书</li>
        <li style="background: #980;">服务</li>
      </ul>
    </div>
    <div id="footer"></div>

    <script
      src="js/jquery-1.11.0.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script type="text/javascript">
      $(function () {
        var flag = true;
        $(window).scroll(function () {
          if (flag) {
            var t = $(this).scrollTop();
            if (t > 500) {
              $("#floorNav").fadeIn();
            } else {
              $("#floorNav").fadeOut();
            }
            $("#content li").each(function () {
              if (t >= $(this).offset().top - $(this).outerHeight() / 2) {
                var index = $(this).index();
                console.log(index);
                $("#floorNav li")
                  .eq(index)
                  .addClass("hover")
                  .siblings()
                  .removeClass("hover");
              }
            });
          }
        });

        $("#floorNav li:not(:last)").click(function () {
          flag = false;
          var index = $(this).index();
          /* $(window).scrollTop($("#content li").eq(index).offset().top); */
          $("html,body").animate(
            {
              scrollTop: $("#content li").eq(index).offset().top,
            },
            () => {
              flag = true;
            }
          );
          $(this).addClass("hover").siblings().removeClass("hover");
        });
      });
    </script>
  </body>
</html>

二.自己写的

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css -->
    <style>
        /* 公用 */
        *{margin:0;padding:0;}
        ul,li,ol{list-style: none;}
        .container{margin:auto;position: relative;width: 800px;height:600px;}

        #box{}

        /* 左边导航 */
        #floorNav{position: fixed;left: 80px;top:50%;transform: translateY(-50%);border: 1px solid #ddd;}
        #floorNav li{width:50px;height:40px;line-height: 40px;text-align:center;border-bottom: 1px solid #ddd;position: relative;}

        #floorNav li span{display: none;position: absolute;left: 0;top: 0;width:100%;height:100%;text-align:center;background: rgb(73, 219, 245);color: white;}
        #floorNav li:hover span,#floorNav li.hover span{display:block;}

        #floorNav li:last-child{border-bottom: none;background: rgb(73, 219, 245);color: white;}

        /* 右边内容块 */
        #header{width: 800px;height:1000px;}

        #content{}
        #content li{width: 800px;height:600px;line-height: 600px;font-size: 30px;font-weight: 900;text-align: center;}

        #footer{width: 800px;height:1000px;}
    </style>
</head>

<body>
    <!-- html -->
    <div id="box">
        <ul id="floorNav">
            <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>TOP</li>
        </ul>
        <div class="container">
            <div id="header" style="background: rgb(180, 10, 247);"></div>
            <ul id="content">
                <li style="background: #A3D1D1;">服饰</li>
                <li style="background: #6FB7B7;">美妆</li>
                <li style="background: #CDCD9A">手机</li>
                <li style="background: #AFAF61;">家电</li>
                <li style="background: #B8B8DC;">数码</li>
                <li style="background: #8080C0;">运动</li>
                <li style="background: #97CBFF;">居家</li>
                <li style="background: #46A3FF;">母婴</li>
                <li style="background: #FF44FF;">食品</li>
                <li style="background: #FF77FF;">图书</li>
                <li style="background: #FFD0FF;">服务</li>
            </ul>
            <div id="footer" style="background: rgb(180, 10, 247);"></div>
        </div>
    </div>

    <!-- js -->
    <script src="./js/jquery-1.11.0.js"></script>
    <script>
        $(function(){
            // var bool=true;
            $(window).scroll(function(){
                // if(bool){
                    var t=$(this).scrollTop();
                    if(t>500){
                        $('#floorNav').fadeIn();
                    }else{
                        $('#floorNav').fadeOut();
                    }

                    $('#content li').each(function(){
                        if(t>=$(this).offset().top-$(this).outerHeight()/2){
                            var index=$(this).index();
                            $('#floorNav li').eq(index).children('span').show().parent().siblings().children('span').hide();
                        }
                    })
                // }
            });

            $('#floorNav li:not(:last)').click(function(){
                // bool=false;
                var index=$(this).index();
                $('html,body').animate(
                    {scrollTop:$('#content li').eq(index).offset().top},
                );
                $(this).addClass('hover').siblings().removeClass('hover');
            });
        });
    </script>
</body>

</html>