# 广告悬浮框移动效果

广告悬浮框移动效果

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;
      }
    },
posted @   ajajaz  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示