任意一个函数移动到指定的目标位置

王慕寒

已于 2023-02-14 12:54:02 修改

阅读量136

点赞数

分类专栏：前端文章标签：前端 Powered by 金山文档

于 2023-02-14 12:53:31 首次发布

本文链接：https://blog.csdn.net/m0_51290484/article/details/129024846

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章描述了一个JavaScript函数animateMove，用于实现元素按设定的百分比平滑移动。函数考虑了移动方向、步长计算以及到达目标位置的判断，同时在每次调用时清理之前的定时器，确保只使用一个定时器。在next和last方法中，根据进度调整元素的位置。

摘要由CSDN通过智能技术生成

function animateMove(element, target) {
    //先清理定时器（为了保证每次调用的都是同一个定时器 或者说 无论点多少次按钮都只调用一个定时器）
    clearInterval(element.timeId);
    //启动一个定时器，定时器的Id值存储到了一个对象的属性中
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;//获取当前ul的位置(数字类型)
        var step = 10;
        step = target - current > 0 ? step : -step; //决定左右移动方向
        current += step; //当前移动到的位置
        if (Math.abs(target - current) > Math.abs(step)) { //与目标的距离 > 每次移动的step
            element.style.left = current + "px";
        } else { //马上到达目标了（与目标的距离 < step）
            clearInterval(element.timeId);  //清理定时器
            element.style.left = target + "px"; //直接到达目标位置
        }
    }, 10);
}

改进为按百分比跳转进度

last() {
      if (this.personProgress !== 0) {
        const res = document.getElementById("mid_center");
        // console.log(res);
        this.personProgress += 10;
        this.animateMove(res, this.personProgress);
      }
    },
next() {
      const midCenterClassDom = document.getElementsByClassName("mid_center");
      const mid_centerIdDom = document.getElementById("mid_center");
      const outBoxClassDom = document.getElementsByClassName("outBox");
      if (
        -this.current / 10 !==
        Math.ceil(
          (midCenterClassDom[0].offsetWidth - outBoxClassDom[0].offsetWidth) /
            (outBoxClassDom[0].offsetWidth / 10)
        )
      ) {
        this.personProgress -= 10;
        this.outBoxWidth = outBoxClassDom[0].offsetWidth;
        this.innerBoxWidth = midCenterClassDom[0].offsetWidth;
        this.animateMove(mid_centerIdDom, this.personProgress);
      }
    },
 // 移动函数
animateMove(element, target) {
      // 先清理定时器（为了保证每次调用的都是同一个定时器 或者说 无论点多少次按钮都只调用一个定时器）
      clearInterval(element.timeId);
      // 启动一个定时器，定时器的Id值存储到了一个对象的属性中
      element.timeId = setInterval(() => {
        var step = 1;
        console.log(this.current, "this.current1");
        step = target - this.current > 0 ? step : -step; // 决定左右移动方向
        this.current += step; // 当前移动到的位置
        if (Math.abs(target - this.current) > Math.abs(step)) {
          console.log("进入if");
          // 与目标的距离 > 每次移动的step
          console.log(this.current, "this.current2");
          element.style.left = this.current + "%";
          console.log(element.style.left, "element.style.left");
        } else {
          console.log("进入else");
          // 马上到达目标了（与目标的距离 < step）
          clearInterval(element.timeId); // 清理定时器
          console.log(target, "target");
          this.current = target;
          console.log(this.current, "this.current3");
          element.style.left = target + "%"; // 直接到达目标位置
        }
      }, 10);
    },