标签：防抖 vue oDiv img 悬浮 width ai rem speed

节流防抖参考link:https://blog.csdn.net/zuorishu/article/details/93630578

<template>
  <img :src="aiUrl" class="ai-img" id="ai-img" />
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      aiUrl: require("@/assets/img/home/ai.png")
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.startMove, true);

    window.addEventListener("scroll", this.debounce(this.startMove, 100), true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.startMove);
    clearInterval(this.timer);
  },
  methods: {
    debounce(fn, delay) {
      var timeout = null; // 创建一个标记用来存放定时器的返回值
      return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout);
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      };
    },
    startMove() {
      var oDiv = document.getElementById("ai-img");
      var scrollTop = document.getElementById("popContainer").scrollTop;
      const iTarget = parseInt(
        (document.documentElement.clientHeight - oDiv.offsetHeight) / 2 +
          scrollTop
      );
      clearInterval(this.timer);
      this.timer = setInterval(function () {
        var oDiv = document.getElementById("ai-img");
        var speed = (iTarget - oDiv.offsetTop) / 5;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (oDiv.offsetTop == iTarget) {
          clearInterval(this.timer);
        } else {
          oDiv.style.top = oDiv.offsetTop + speed + "px";
        }
      }, 30);
    }
  }
};
</script>

<style lang="less">
.ai-img {
  position: absolute;
  bottom: 1.2rem;
  width: 1.34rem;
  z-index: 1000;
}
#contact-us-header {
  .ai-img {
    width: 1.34rem;
    position: absolute;
    bottom: 1rem;
  }
}
@media screen and (max-width: 1200px) {
  .ai-img {
    width: 1.34rem;
    position: absolute;
    bottom: 2rem;
  }
}
@media screen and (max-width: 979px) {
  .ai-img {
    width: 1.34rem;
    position: absolute;
    bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .ai-img {
    width: 1.34rem;
    position: absolute;
    bottom: 1rem;
  }
}
@media screen and (max-width: 690px) {
  .ai-img {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .ai-img {
    display: none;
  }
}
</style>

标签：防抖,vue,oDiv,img,悬浮,width,ai,rem,speed
来源： https://blog.csdn.net/qq_37167049/article/details/113766145

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。