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

news2024/11/17 0:22:59

在这里插入图片描述

1.dom

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

2.js

 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

.popup-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 999;
    background: #ccc;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1574039.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s CNI Calico 网络模式总结【建议收藏】

目录 calico架构图 ​编辑 IPIP模式下的架构图 calico 核心组件 Overlay 网络模式&#xff1a; Vxlan IPIP IpCrossubnet Pod IP对外暴露 不对外暴露&#xff1a; 实现对外暴露的方法&#xff1a; overlay模式下的网络MTU Iptables & ipvs Full-mesh o…

工程中实践的微服务设计模式

大家好&#xff0c;我是 方圆。最近在读《微服务架构设计模式》&#xff0c;开始的时候我非常的好奇&#xff0c;因为在我印象中&#xff0c;设计模式是常说的那23种设计模式&#xff0c;而微服务的设计模式又是什么呢&#xff1f;这个问题也留给大家&#xff0c;在文末我会附上…

【第二十篇】使用BurpSuite实现SSRF(实战案例)

SSRF漏洞:向服务器发送伪造请求即可访问或操作服务器上的资源。 假设一个网站http://ice.com,允许用户输入一个URL,然后在服务器端通过发起HTTP请求来获取该URL的内容并显示给用户。如果网站没有对URL进行验证,通过输入 http://ice/admin ,即可获取到内部系统的敏感信息,…

【数据结构】考研真题攻克与重点知识点剖析 - 第 3 篇:栈、队列和数组

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

【学习笔记】Elsevier的Latex模板文件(附网址)

注&#xff1a;这是一篇没有技术含量的水文&#xff0c;主要是看有人下载下来&#xff0c;居然当成资源需要积分才能下载。我觉得不行&#xff0c;故提供原始下载地址供查阅使用。 链接: 上述图片所示网址&#xff1a;链接直达

Kubernetes学习笔记8

Kubernetes集群客户端工具kubectl 我们已经能够部署Kubernetes了&#xff0c;那么我们如何使用Kubernetes集群运行企业的应用程序呢&#xff1f;那么&#xff0c;我们就需要使用命令行工具kubectl。 学习目标&#xff1a; 了解kubectl 命令帮助方法 了解kubectl子命令使用分…

C++如何分开配release和debug版本编译环境

右键当前文件->属性。 在下拉栏目中找到release和dubug分别进行配置。

【qml】 在QML场景图中使用QPainter 的方法

【qml】 在QML场景图中使用QPainter 的方法_qquickpainteditem-CSDN博客 QQuickPaintedItem 1.官方资料 QQuickPaintedItem类提供了一种在QML场景图中使用QPainter API的方法。 QQuickPaintedItem使QPainter API与QML场景图一起使用成为可能。它在场景图中设置了一个纹理矩…

【Spring Cloud Alibaba】9 - OpenFeign集成Sentinel实现服务降级

目录 一、简介Sentinel 是什么如何引入Sentinel 二、服务搭建1.安装Sentinel控制台1.1 下载1.2 启动1.3 访问 2.改造服务提供者cloud-provider服务2.1 引入依赖2.2 添加API2.3 添加配置文件 3.改造cloud-consumer-feign服务3.1 引入依赖3.2 添加Feign接口3.3 添加服务降级类3.4…

InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1&#xff09;建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

卫星遥感影像如何选择合适的分辨率

​ 卫星遥感影像的分辨率是影响其应用效果的关键因素之一。分辨率越高&#xff0c;所获取的图像细节越丰富&#xff0c;能够更准确地反映地物的特征和变化。因此&#xff0c;在选择卫星遥感影像时&#xff0c;需要根据实际需求和数据可获取性来选择合适的分辨率。 一、分辨…

大语言模型上下文窗口初探(下)

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解上下文窗口的概念、在LLM中的重要性&#xff0c;下篇主要讲解长文本能否成为LLM的护城河、国外大厂对长文本的态度。 3、长文本是护城河吗&#xff1f; 毫无疑问&#xff0c;Kimi从一开始就用“长文本”占领…

162 Linux C++ 通讯架构实战16,UDP/TCP协议的优缺点,使用环境对比。UDP 服务器开发

UDP/TCP协议的优缺点 TCP :面向连接的&#xff0c;可靠数据包传输。对于不稳定的网络层&#xff0c;采取完全弥补的通信方式。丢包重传 优点&#xff1a;稳定&#xff0c;数据流量稳定&#xff0c;速度稳定&#xff0c;顺序稳定 缺点&#xff1a;传输速度慢&…

大语言模型上下文窗口初探(上)

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解上下文窗口的概念、在LLM中的重要性&#xff0c;下篇主要讲解长文本能否成为LLM的护城河、国外大厂对长文本的态度。 1、什么是上下文窗口&#xff1f; 上下文窗口&#xff08;context window&#xff09;是…

【已解决】ZIP压缩文件如何设置密码?

ZIP是常用的压缩格式之一&#xff0c;对于重要的ZIP文件&#xff0c;我们还可设置密码保护&#xff0c;那ZIP压缩文件怎么设置密码呢&#xff1f;不清楚的小伙伴一起来看看吧&#xff01; 给ZIP文件设置密码&#xff0c;我们需要用到支持ZIP格式的解压缩软件&#xff0c;比如7…

数字乡村:科技引领新时代农村发展

随着信息技术的迅猛发展和数字化浪潮的推进&#xff0c;数字乡村作为新时代农村发展的重要战略&#xff0c;正日益成为引领农村现代化的强大引擎。数字乡村不仅代表着农村信息化建设的新高度&#xff0c;更是农村经济社会发展的重要支撑。通过数字技术的深入应用&#xff0c;农…

41.基于SpringBoot + Vue实现的前后端分离-校园网上店铺管理系统(项目 + 论文PPT)

项目介绍 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。本课题研究和开发校园网上店铺&#xff0c;让安装在计算机上的该系统变成管理人员的小帮手&#xff0c;提高校园店铺商品销售信息处…

C语言——详解字符函数和字符串函数(二)

Hi,铁子们好呀&#xff01;之前博主给大家简单地介绍了部分字符和字符串函数&#xff0c;那么这次&#xff0c;博主将会把这些字符串函数给大家依次讲完&#xff01; 今天讲的具体内容如下: 文章目录 6.strcmp函数的使用及模拟实现6.1 strcmp函数介绍和基本使用6.1.1 strcmp函…

还在担心报表不好做?不用怕,试试这个方法(三)

系列文章&#xff1a; 《还在担心报表不好做&#xff1f;不用怕&#xff0c;试试这个方法》&#xff08;一&#xff09; 《还在担心报表不好做&#xff1f;不用怕&#xff0c;试试这个方法》&#xff08;二&#xff09; 概要 在上一篇文章《还在担心报表不好做&#xff1f;…

python爬虫学习第十五天-------ajax的get和post请求

嗨嗨嗨&#xff01;兄弟姐妹大家好哇&#xff01;今天我们来学习ajax的get和post请求 一、了解ajax Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;是一种在 Web 开发中用于创建交互式网页应用程序的技术。通过 Ajax&#xff0c;网页可以在不重新加载整个页面…