當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    JS實現導航欄樓層特效

    欄目:代碼類 時間:2020-01-01 18:08

    本文實例為大家分享了JS實現導航欄樓層的具體代碼,供大家參考,具體內容如下

    知識點

    1.多個事件有沖突的時候,需要設置flag判斷是什么事件,進而進行后續操作。
    2.樓層效果就是判斷scrollTop和offsetTop的關系
    3.引入工具庫工具庫

    運行效果

    導航與界面實現互動

    代碼

    <!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 >
        <li class="current">第1層</li>
        <li>第2層</li>
        <li>第3層</li>
        <li>第4層</li>
        <li>第5層</li>
      </ol>
      <!--樓層-->
      <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>
    
青海十一选五开奖数据