* {

  padding: 0;

  margin: 0;

}

ul {

  list-style: none;

}

a {

  text-decoration: none;

  color: #333;

}

body {

  background-color: black;

}

.demo {

  position: relative;

  width: 900px;

  height: 42px;

  margin: 50px auto;

  background: #fff url(https://pupperc.com/img/202201041615500.png) no-repeat

    right center;

  border-radius: 5px;

}

.cloud {

  position: absolute;

  top: 0;

  left: 0;

  width: 83px;

  height: 42px;

  background: url(https://pupperc.com/img/202201041616469.gif) no-repeat;

}

.demo ul {

  position: absolute;

}

.demo li {

  float: left;

  width: 83px;

  line-height: 42px;

  text-align: center;

}

.demo a {

  display: inline-block;

  height: 42px;

}

​

.demo ul li a:hover {

  color: #fff;

}

​

window.addEventListener("load", function () {

  var cloud = document.querySelector(".cloud");

  var lis = document.querySelector(".demo").querySelectorAll("li");

​

  // span 起始位置

  var start = 0;

​

  // 给所有 li 绑定事件

  for (var i = 0; i < lis.length; i++) {

    // 鼠标经过，把当前 li 作为目标值

    lis[i].addEventListener("mouseenter", function () {

      animate(cloud, this.offsetLeft);

    });

    // 鼠标离开，把 0 作为目标值

    lis[i].addEventListener("mouseleave", function () {

      animate(cloud, start);

    });

    // 鼠标点击，把当前位置作为目标值

    lis[i].addEventListener("click", function () {

      animate(cloud, this.offsetLeft);

      start = this.offsetLeft;

    });

  }

​

  // 封装 移动函数

  function animate(obj, target, callback) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {

      var step = (target - obj.offsetLeft) / 10;

      step = step > 0 ? Math.ceil(step) : Math.floor(step);

      if (obj.offsetLeft == target) {

        clearInterval(obj.timer);

        callback && callback();

      }

      obj.style.left = obj.offsetLeft + step + "px";

    }, 15);

  }

});

​