vue广告悬浮框,页面来回移动,鼠标放上停止,离开移动

1.dom

javascript 复制代码
 <div class="popup-dialog" id="popupDialog" @mouseover="onMmouseover" @mouseout="onMouseout">
   <p>vue广告悬浮</p>
  </div>

2.js

javascript 复制代码
 mounted() {
        this.initPopup();
    },
 beforeDestory() {
      if (this.times) {
          clearInterval(this.times);
      }
  },
  methods:{
  onMmouseover() {
    if (this.times) {
            clearInterval(this.times);
        }
    },
    onMouseout() {
      
        if (this.times) {
            clearInterval(this.times);
        }
        this.initPopup();
    },
    initPopup() {
        let count = 11; //速度
        // let count = 500         //速度
        let stepX = 1;
        let stepY = 1;
        let pop = document.getElementById("popupDialog");
        let popWidth = pop.offsetWidth;
        let popHeight = pop.offsetHeight;
        let clientw = document.body.clientWidth;
        let clienth = document.body.clientHeight;
        let x = parseInt(pop.getBoundingClientRect().left);
        let y = parseInt(pop.getBoundingClientRect().top);
        this.times = setInterval(() => {
            let distenceX = clientw - x;
            let distenceY = clienth - y;
            if (distenceX - popWidth < 0 || distenceX > clientw) {
                stepX = -stepX;
            }
            if (distenceY - popHeight < 0 || distenceY > clienth) {
                stepY = -stepY;
            }
            x += stepX;
            y += stepY;
            this.changePos(pop, x, y);
        }, count);
    },
    changePos(pop, x, y) {
        pop.style.left = x + "px";
        pop.style.top = y + "px";
    },
  }
  

3.css

javascript 复制代码
.popup-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 999;
    background: #ccc;
}
相关推荐
NBtab13 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码25 分钟前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户51681661458411 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
libraG1 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅1 小时前
JavaScript 作用域
前端·javascript
前端缘梦1 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
我是天龙_绍1 小时前
使用 TypeScript (TS) 结合 JSDoc
前端
云枫晖1 小时前
JS核心知识-事件循环
前端·javascript
Simon_He1 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown