欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现导航栏楼层特效

程序员文章站 2022-06-17 15:20:44
本文实例为大家分享了js实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作。 2.楼层效果就是...

本文实例为大家分享了js实现导航栏楼层的具体代码,供大家参考,具体内容如下

知识点

1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作。
2.楼层效果就是判断scrolltop和offsettop的关系
3.引入工具库

运行效果

导航与界面实现互动

JS实现导航栏楼层特效

JS实现导航栏楼层特效

代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <style>
    *{margin: 0;padding: 0;list-style: none;border:0;}
    html, body, ul{width: 100%;height: 100%;}
    #ul li{
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 30px;
      /*background-color: red;*/
      color: #fff;
    }

    #ol{
      width: 80px;
      background-color: #ccc;
      position: fixed;
      left: 50px;
      top: 200px;
      border: 1px solid #fff;
    }

    #ol li{
      text-align: center;
      line-height: 30px;
      border-bottom: 1px solid #fff;
      color: #fff;
      cursor: pointer;
    }

    #ol li.current{
      background-color: orangered;
    }
  </style>
</head>
<body>
  <!--导航-->
  <ol id="ol">
    <li class="current">第1层</li>
    <li>第2层</li>
    <li>第3层</li>
    <li>第4层</li>
    <li>第5层</li>
  </ol>
  <!--楼层-->
  <ul id="ul">
    <li>第1层内容</li>
    <li>第2层内容</li>
    <li>第3层内容</li>
    <li>第4层内容</li>
    <li>第5层内容</li>
  </ul>

<script src="../../00mytools/mytools.js"></script>
<script>
  window.addeventlistener('load', function (ev) {
     // 1. 获取标签
    var ol = mytool.$('ol'), ul = mytool.$('ul');
    var ullis = ul.children;
    var ollis = ol.children;

    // 是否是点击产生的滚动
    var isclick = false;

    // 2. 上色
    var colorarr = ['red', 'green', 'blue', 'purple', 'yellow'];
    for (var i = 0; i < colorarr.length; i++) {
      ullis[i].style.backgroundcolor = colorarr[i];
    }

    // 3. 监听导航点击
    for (var j = 0; j < ollis.length; j++) {
      var olli = ollis[j];
      (function (index) {
        olli.addeventlistener('click', function () {
          isclick = true;
          for (var i = 0; i < ollis.length; i++) {
            ollis[i].classname = '';
          }
          this.classname = 'current';
          // document.documentelement.scrolltop = index * mytool.client().height;

          mytool.slowmoving(document.documentelement, {'scrolltop': index * mytool.client().height}, function () {
            isclick = false;
          });
        });
      })(j)
    }

    // 4. 监听滚动
    var roll = 0;
    window.addeventlistener('scroll', function (ev1) {
      if(!isclick){
        // 4.1 获取头部滚动偏移的高度
        roll = math.ceil(number(mytool.scroll().top));

        // 4.2 遍历
        for (var i = 0; i < ullis.length; i++) {
          // 4.3 判断
          if(roll >= ullis[i].offsettop){
            for (var j = 0; j < ollis.length; j++) {
              ollis[j].classname = '';
            }
            ollis[i].classname = 'current';
          }
        }
      }
    })
  });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。