一個HTML 導航欄下划線跟隨效果

這幾日學習html，一直在B站亂逛，發現網站的動效做的真好。然后翻到了這一頁：

點此查看

上面的導航欄是一個下划線跟隨的效果。由於有一個初始的選項（當前頁面對應標簽保持藍色），鼠標划過時除了高亮項下面的下划線也要跟隨。如果只實現前面這些效果可以用css完成，但是其實這里面的下划線是一個動畫效果，仔細觀察發現下划線相當於在border-bottom上面做水平運動，切換標簽時有一個過渡效果，因此實際上這個下划線其實是一個獨立的bar滑塊

結構定義如下：

    <div class="nav">
        <ul>
            <li class="now" id="cur"><a href="#">綜合</a></li>
            <li><a href="#">視頻</a></li>
            <li><a href="#">番劇</a></li>
            <li><a href="#">影視</a></li>
            <li><a href="#">直播</a></li>
        </ul>
        <div class="go hover_bar"></div>
    </div>

nav的position設為相對位移，div如下：

        .go {
            width: 32px;
            height: 3px;
            background-color: #00a1d6;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;

        }

假定每個標簽的寬度間距固定，那么只要在js中監聽鼠標事件，讓bar移動n個標簽的距離即可.js代碼如下

<script>
  ul = document.getElementsByTagName("ul")[0].children;
  sub_active = document.getElementById("sub_active");
  var str = "hello world";
  sub_active_pos_left = sub_active.offsetLeft;
  nav_bar = document.getElementById("nav_bar");
  for (let i = 0; i < ul.length; i++) {
      ul[i].addEventListener("mouseenter", function (oEvent) {
          var str = "hello world";
          nav_bar.style.left = this.offsetLeft + "px";
      });
      ul[i].addEventListener("mouseleave", function () {
          nav_bar.style.left = sub_active_pos_left + "px";
      });
  }
</script>