• 楼层导航


    鼠标滚动到某个楼层,某个楼层的楼层按钮高亮显示,点击左边的楼层按钮,页面直接定位到这个楼层

    html:

      <div style="height: 100px;text-align: center" class="head">头部</div>

      <div class="main">
        <div style="background-color: red;" class="louti">服饰</div>
        <div style="background-color:chartreuse;" class="louti">美妆</div>
        <div style="background-color: indianred;" class="louti">手机</div>
        <div style="background-color: darkgreen;" class="louti">家电</div>
        <div style="background-color: beige;" class="louti">数码</div>
        <div style="background-color: hotpink;" class="louti">运动</div>
        <div style="background-color: #abcdef;" class="louti">居家</div>
        <div style="background-color: lightpink;" class="louti">母婴</div>
        <div style="background-color: aqua;" class="louti">食品</div>
        <div style="background-color: #abcdef;" class="louti">图书</div>
      </div>

      <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>
      </ul>

    css:  

      * {
        margin:0;
        padding:0;
      }
      .main div {
        90%;
        height:400px;
        text-align:center;
        margin:10px auto;
      }
      li {
        list-style-type:none;
        40px;
        height:40px;
        line-height:40px;
        text-align:center;
        border-bottom:1px dashed #aaa;
        position:relative;
      }
      li.hover {
        background-color:#c81623;
      }
      /*鼠标移动上去后的效果*/
      li span {
        display:none;
        position:absolute;
        40px;
        height:40px;
        text-align:center;
      }
      li.hover span {
        display:block;
        top:0;
        left:0;
        background-color:#c81623;
        color:white;
      }
      /*鼠标移动上去后的效果*/
      ul {
        position:fixed;
        left:10px;
        top:100px;
        display:none;
      }
      li span.cli {
        display:block;
        top:0;
        left:0;
        background-color:#c81623;
        color:white;
      }

    js:

    //鼠标移动上去的事件
      $(function() {
        $("ul li").hover(function() {
        $(this).addClass("hover");
      }, function() {
        $(this).removeClass("hover");
      });

      var mark = 1;
      //鼠标点击事件
      $("ul li").click(function() {
        $(this).find("span").addClass("cli");
        $(this).siblings().find('span').removeClass("cli"); //siblings为找到该li的所有同辈元素;
      });
      //鼠标点击跳转效果
      $("ul li").click(function() {
        mark = 2;
        var index = $(this).index();
        var h = $(".louti").eq(index).offset().top; //offset为获取匹配元素在当前视口的相对偏移,有top和left;
        $('body').animate({
          scrollTop: h
        }, 500, function() { //scrollTop为获取匹配元素相对滚动条顶部的偏移。
          mark = 1
        })
      });

      $(window).scroll(function() {
        var H = $(this).scrollTop(); //获取滚动条的高度
        if (mark == 1) {
        $(".louti").each(function() {
        index = $(this).index();
        h = $(".louti").eq(index).offset().top;
        if (H >= h) {
          $("li").eq(index).find("span").addClass("cli");
          $("li").eq(index).siblings().find("span").removeClass("cli")
        }
      });
    }
    //当滚动到一定高度时楼梯式导航消失与显示
      var $height = $(window).scrollTop();
      var $main_h = $(".main").offset().top;
      console.log($height);
      console.log($main_h);
      if ($height > $main_h) {
        $("ul").fadeIn(600);
      } else {
        $("ul").fadeOut(600);
      }
      })
    })

  • 相关阅读:
    微信小程序支付【前端】
    CSS主题切换
    利用Proxy写了个存储管理
    前端存储cookie操作
    canvas电子签名和播放划线
    【原创】[Ext.ux.UploadDialog] 控件使用说明及在Ext 3.x下问题解决
    【原创】分享一组VC++底层图像处理函数
    【转发】SQL Server数据库被质疑解决方案
    SVN 解决update失败出现乱码提示或工作副本已经锁定
    Qt 外部子模块的3种使用方法,以QtXlsx为例
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6835854.html
Copyright © 2020-2023  润新知