nodebook/20191019/20191019.md

20191019

• 轮播图案例 linkToHtml
  • 动画代码

  function animate(ele,target) {
      console.log(ele,target)
      clearInterval(ele.timer)
      ele.timer = setInterval(function() {
        //当前左边宽度
        var current = ele.offsetLeft;
        //步长
        var step = 10;
        //确认方向
        step = target - current >= 0 ? step : -step;
        //动画完后左边宽度
        current += step;
        if(Math.abs(target - current) > Math.abs(step)) {
          //当左边需要移动的宽度大于移动的步长
          //直接移动
          ele.style.left = current + 'px'
        } else {
          //小于移动的步长
          //清除计时器
          clearInterval(ele.timer)
          //直接设置为终点
          ele.style.left = target + 'px';
        }
      },10)
    }