滑动导航栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>滑动导航栏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
      }
      body {
        background-color: #ffffff;
      }
      .nav {
        width: 795px;
        height: 63px;
        border-radius: 5px;
        position: relative;
        margin: 100px auto;
        border: 1px solid #cbcbcb;
        box-shadow: -1px 10px 5px 0px rgba(0, 0, 0, 0.07);
        -webkit-box-shadow: -1px 10px 5px 0px rgba(0, 0, 0, 0.07);
        -moz-box-shadow: -1px 10px 5px 0px rgba(0, 0, 0, 0.07);
      }
      .nav ul {
        position: relative;
      }
      .nav ul li {
        float: left;
        width: 88px;
        height: 63px;
        text-align: center;
        line-height: 70px;
        cursor: pointer;
        transition: all 1s ease 0s;
      }
      .nav ul li:hover {
        color: #fff;
      }
      .activeOnBox {
        width: 88px;
        height: 63px;
        background: #2196f3;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <nav class="nav">
      <span class="activeOnBox"></span>
      <ul>
        <li>双11狂欢</li>
        <li>服装会场</li>
        <li>数码家电</li>
        <li>家具建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
      </ul>
    </nav>
    <script>
      window.onload = function () {
        // 1. 获取需要的标签
        let nav = $("nav");
        console.info(nav);
        let activeOnBox = nav.children[0];
        let ul = nav.children[1];
        let allLis = ul.children;

        // 记录鼠标点击的位置
        let beginX = 0;

        // 2. 遍历
        for (let i = 0; i < allLis.length; i++) {
          let li = allLis[i];

          // 2.1 监听鼠标进入
          li.onmouseover = function () {
            end = this.offsetLeft;
          };

          // 2.2 监听鼠标按下事件
          li.onmousedown = function () {
            beginX = this.offsetLeft;
          };

          // 2.2 监听鼠标离开事件
          li.onmouseout = function () {
            end = beginX;
          };
        }

        // 3.缓动动画
        let begin = 0,
          end = 0;
        setInterval(function () {
          begin = begin + (end - begin) * 0.1;
          activeOnBox.style.left = begin + "px";
        }, 10);
        //好像jQuery一样的功能
        // 获取对应类名的元素
        function $(className) {
          return typeof className === "string"
            ? document.getElementsByClassName(className)[0]
            : null;
        }
      };
    </script>
  </body>
</html>