js鼠标移入移出背景图移动形成的帧动画

这是效果图

首先思路是这样的： ①让背景图移动，可以改变backgroundPositionX的这个属性，我的背景图是这样的， 背景图有16个小图标，宽是800px，每个图标的宽是50px，意思是每次移动50px，移动15次

②鼠标移入移出时都写个for循环里面加定时器

直接上代码

  <div id="app-down-icon"></div>
  <script>
    var app = document.getElementById("app-down-icon");
    //定时器
    var timeover;
    var timeout;
    //次数
    var index = 0;
    app.onmouseover  = () => {
      clearTimeout(timeout)
      for (let j = 50,i=0; j < 800; j += 50,i++) {
        timeover = setTimeout(() => {
            app.style.backgroundPositionX = -j + "px";
            index++
            console.log( '鼠标移入:'+ -j,index );
        }, i*100)
      }
    }
    app.onmouseout  = () => {
      clearTimeout(timeover)
      for (let j = (-index+1)*50,i=0; j <= 0; j += 50,i++) {
        timeout = setTimeout(() => {
            app.style.backgroundPositionX = j + "px";
            index--
            console.log( '鼠标移出:'+ j,index );
        }, i*100)
      }
    }
  </script>

这里的index是为了记录移动的次数，然后从该次数对应的位置继续移动，i 是为了让定时器每隔规定的时间运行，不加 i 的话会直接跳到最后一步。

这样貌似就可以了，不过有个问题，直接看图

感觉像鬼畜一样。。。。。。当鼠标移入后，背景图还没完全移动到最后一格时，鼠标就移出，就会出现这样的情况，打印了他的移动距离和次数出来看看

粗略看很乱，仔细看还是能看出一些端倪的，先看鼠标移入时移动的距离，很明显移动了14次，而鼠标移出时移动的距离，移动了6次，是因为当鼠标移出时，触发了清除定时函数 clearTimeout(timeover)，实际上是只把timeover这个定时器的最后一次的清除了，所以即使鼠标移出了，还是会继续移动，移动了14次；

鼠标移出时移动的距离6次是因为index等于6时鼠标才移出，可以看打印的结果。

我在定时器里加了一个判断，判断定时器执行时鼠标的状态是移入还是移出，就解决了。

完整代码如下

<style>
    #app-down-icon {
      width: 50px;
      height: 50px;
      background: url(b.jpg) no-repeat;
    }
  </style>


  <div id="app-down-icon"></div>
  <script>
    var app = document.getElementById("app-down-icon");
    //定时器
    var timeover;
    var timeout;
    //位置
    var index = 0;
    //判断鼠标移入移出
    var judge = false;

    app.onmouseover  = () => {
      judge = true
      clearTimeout(timeout)
      for (let j = 50,i=0; j < 800; j += 50,i++) {
        timeover = setTimeout(() => {
            if (this.judge) {
              app.style.backgroundPositionX = -j + "px";
              index++
              console.log( '鼠标移入:'+-j,index );
            }
          }, i*100)
      }
    }
    app.onmouseout  = () => {
      judge = false
      clearTimeout(timeover)
      for (let j = (-index+1)*50,i=0; j <= 0; j += 50,i++) {
        timeout = setTimeout(() => {
          if (!this.judge) {
            app.style.backgroundPositionX = j + "px";
            index--
            console.log( '鼠标移出:'+j,index );
          }
        }, i*100)
      }
    }
  </script>