# 广告悬浮框移动效果

发布时间 2024-01-03 09:51:54作者: ajajaz

广告悬浮框移动效果

moveWrap() {
      var max_left =
        document.documentElement.clientWidth - this.wrapInfo.offsetWidth;
      var max_top =
        document.documentElement.clientHeight - this.wrapInfo.offsetHeight;
      //          盒子可到达的最大宽度=可视窗口的最大宽度-盒子的本身宽度

      //        获得元素旧的left top值
      var old_left = this.wrapInfo.offsetLeft;
      var old_top = this.wrapInfo.offsetTop;

      //        计算新的left,top值
      var new_left = old_left + this.moveX;
      var new_top = old_top + this.moveY;

      if (new_left > max_left) {
        new_left = max_left;
      }
      if (new_top > max_top) {
        new_top = max_top;
      }
      if (new_left < 0) {
        new_left = 0;
      }
      if (new_top < 0) {
        new_top = 0;
      }

      //              将新值赋值回去
      this.wrapInfo.style.left = new_left + "px";
      this.wrapInfo.style.top = new_top + "px";

      //              判断
      if (new_top >= max_top) {
        this.moveY = -1;
      }
      if (new_top == 0) {
        this.moveY = 1;
      }
      if (new_left >= max_left) {
        this.moveX = -1;
      }
      if (new_left == 0) {
        this.moveX = 1;
      }
    },