JS 自定义的悬浮窗被浏览器遮挡问题解决方案

news2024/12/22 18:40:06

 

遮挡问题解决思路,首先拿到外层的DOM元素div的宽高,然后根据鼠标悬浮事件的元素e  e.clientX表距离页面窗口宽的位置 e.clientY代表距离页面窗口高的位置

然后设置这个悬浮窗为200px

那个这个div的宽高

dom.getElementById('xxxx').cliengHeight

dom.getElementById('xxxx').cliengWdith

如果clientHeight  -  e.clientY < 200 则让当前悬浮元素的top位置往上加200px 这样就不会被遮挡

同理 clientWdith -  e.clientX < 200 则让当前悬浮元素的left位置往左减200px 就不会被遮挡

move鼠标悬浮事件

      move(e) {
        const dom = document.getElementById('fullscreen')
        if (this.$refs.svgrow && this.$refs.tipdiv) {
          const x = Math.round(this.$refs.svgrow.clientWidth / 2)
          const y = Math.round(this.$refs.svgrow.clientHeight / 2)
          if (x > e.clientX) {
            this.clientX = e.clientX + 10 + 'px'
          }
          if (x < e.clientX && y < e.clientY) {
            this.clientY = e.clientY + 10 + 'px'
            this.clientX = e.clientX - this.$refs.tipdiv.clientWidth - 10 + 'px'
          } else if (x < e.clientX) {
            this.clientX = e.clientX - this.$refs.tipdiv.clientWidth - 10 + 'px'
          } else if (y < e.clientY) {
            this.clientY = e.clientY - 70 + 'px'
          }
          if (y > e.clientY) {
            this.clientY = e.clientY + 10 + 'px'
          }
          const clientHeight = dom.clientHeight
          const clientWidth = dom.clientWidth
          if(clientHeight - e.clientY < 200){
            this.clientY =  e.clientY - 200 + 'px'
            this.clientX = e.clientX + 20 + 'px'
          }else{
            this.clientY = e.clientY - 50 + 'px'
            this.clientX = e.clientX + 20 +'px'
          }
          if(clientWidth - e.clientX < 200){
            this.clientX = e.clientX - 250 + 'px'
          }else{
            this.clientX = e.clientX + 10 +'px'
          }
        }
      },

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

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

相关文章

FutureTask

Future接口 Future接口&#xff08;FutureTask实现类&#xff09;定义了操作异步任务执行一些方法&#xff0c;如获取异步任务执行的结果、取消任务的执行、判断任务是否取消、判断任务执行是否完成等。它提供了一种并行异步计算的功能。比如主线程让子线程去执行任务&#xff…

C语言两种方法求证大小端存储

目录 什么是大小端存储&#xff1f; 字节序的概念&#xff1a; 小端字节序存储&#xff1a; 大端字节序存储&#xff1a; 什么是低位字节、高位字节&#xff1f; 记忆技巧&#xff1a; C语言求证大小端存储 法一&#xff1a; 法二&#xff1a; 总结&#xff1a; 什么是…

CAXA中.exb或者.dwg文件保存为PDF

通常CAXAZ中的文件为.exb或者.dwg格式&#xff0c;我们想打印或者保存为PDF文件格式&#xff0c;那么就用一下的方法&#xff1a; CAXA文件如图所示&#xff1a; 框选出你要打印的图纸&#xff01;&#xff01;&#xff01;&#xff01; 我们选择"菜单"->"…

用户订单信息案例

需求: 用户输入商品价格和商品数量&#xff0c;以及收货地址&#xff0c;可以自动打印订单信息 分析: ① 需要输入3个数据&#xff0c;所以需要3个变量来存储price num address ② 需要计算总的价格total ③ 页面打印生成表格, 里面填充数据即可 ④ 记得最好使用模板字符串 【…

java.io.InputStreamReader的read()函数返回值是字符对应的Unicode码点

java.io.InputStreamReader的read()函数定义&#xff1a; https://docs.oracle.com/en/java/javase/19/docs/api/java.base/java/io/InputStreamReader.html#read() 这个返回的值其实就是解码后的字符对应的Unicode码点&#xff08;Unicode code point&#xff09;。 举例 例如…

MySQL表的管理

目录 1.mysql中&#xff0c;数据存储过程分为四步 2.数据库命名规则 3.创建数据库 4.管理数据库的方法 5.修改数据库&#xff08;一般不改&#xff0c;最多改字符集&#xff09; 6.删除数据库 7.如何创建数据表 8.修改表 9.重命名表 10.删除表&#xff08;注意⚠️无…

Java日志slf4j+logback

一、maven依赖 在pom文件增加slf4jlogback依赖 <!-- 版本配置 --> <properties><slf4j.version>1.7.21</slf4j.version><logback.version>1.1.7</logback.version> </properties><dependencies><!-- slf4j依赖包 -->&…

JVM源码剖析之达到什么条件进行JIT优化

版本信息&#xff1a; jdk版本&#xff1a;jdk8u40 思想至上 技术经过数百年的迭代&#xff0c;如今虚拟机中都存在JIT模块&#xff0c;JVM中Hotspot&#xff0c;Android虚拟机中dalvik、Art等等。并且存在一个共性&#xff0c;全部都是解释器和JIT共存。当然&#xff0c;如今…

六、模型融合

目录 1 构建模型多样性1.1 特征多样性1.2 样本多样性1.3 模型多样性 2. 训练过程融合2.1 Bagging2.2 Boosting 3. 训练结果融合3.1 加权法3.2 Stacking 融合3.3 Blending 融合 4. 实战案例 本章主要分为构建多样性、训练过程融合和训练结果融合三部分。模型融合常常是竞赛取得胜…

神州通用数据库Linux安装

神舟通用1.安装包下载地址 神舟通用 操作系统、数据库 1、官方下载链接 2、windows客户端下载链接 3、官方安装手册 4、安装前准备 3.1、创建安装用户 3.2、以root 用户修改神通数据库安装包的所有者为shentong 用户 3.3、以root 用户创建神通数据库主目录并修改所有者为shent…

欧姆龙cx系列plc串门通讯设置串口转以太网通讯处理器

捷米特JM-ETH-CX 串口转以太网通讯处理器是为满足日益增多的工厂设备信息化需求&#xff08;设备网络监控和生产管理&#xff09;而设计&#xff0c;用于欧姆龙 CPM、CQM、C200、C1000、C2000 等多个系列 PLC 的以太网数据采集&#xff0c; 非常方便构建生产管理系统。 捷米特J…

Linux内核--五大子系统

Linux内核有五大核心子系统&#xff0c;分别是进程调度系统、虚拟文件系统(VFS)、内存管理单元(MMU)、网络单元、进程间通信(IPC)。 在Linux内核中的主要组件中&#xff0c;五个核心子系统是最为重要的组成部分&#xff0c;它与系统调用接口&#xff08;System Call Interface&…

docker-compose安装redis一主二从三哨兵集群

准备 docker安装参考&#xff1a; CentOS 安装 docker详解_centos安装docker_慕菲烟云的博客-CSDN博客 docker-compose安装参考&#xff1a;docker之docker-compose_docker compose no-cache_慕菲烟云的博客-CSDN博客 准备一台Linux服务器&#xff08;IP &#xff1a;192.1…

连连看小游戏(html+css+js)

花费了2个小时的摸鱼时间&#xff0c;我成功地编写了一个精彩的连连看小游戏&#xff0c;让我感到非常开心和满足。这款游戏玩起来相当出色&#xff0c;现在我很高兴地与大家分享。 在这个连连看小游戏的设计过程中&#xff0c;我注重细节和用户体验。通过精心安排的图形和布局…

Linux学习笔记--如何在ubuntu中启用root用户和安装软件的方法(解决安装依赖)

一、ubuntu启用root用户 打开Terminal(终端)&#xff0c;右键点击桌面&#xff0c;选择终端&#xff0c;弹出终端窗口。&#xff08;使用快捷键ctrlaltt&#xff0c;也可以调出Terminal&#xff09;。 指令su&#xff0c;该指令可切换用户或者切换到超级管理员root。 su 在终端…

操作系统_进程与线程(一)

目录 1. 进程与线程 1.1 进程的概念 1.2 进程的特征 1.3 进程的状态与转换 1.4 进程的组织 1.4.1 进程控制块PCB 1.4.2 程序段 1.4.3 数据段 1.5 进程控制 1.5.1 进程的创建 1.5.2 进程的终止 1.5.3 进程的阻塞和唤醒 1.6 进程的通信 1.6.1 共享存储 1.6.2 消息…

C语言写杨辉三角

上来先展示一下运行结果吧&#xff1a; 接下来就是分析过程&#xff0c;先来画图分析一番&#xff1a; 根据画图分析的结果&#xff0c;就可以编写代码了&#xff1a; #include<stdio.h> #define row 20 //定义行数常量&#xff0c;更改数值改变行数 #define col 20 …

Alluxio加速器部署

目录 一、Alluxio概述 二、优势 三、Alluxio架构 Ⅰ).Masters HA集群角色 a).Leading Master b).Standby Master c).Secondary Master d).Job Master Ⅱ).Workers 1.Alluxio Workers Ⅲ).Client 1.前期准备 2.下载 Alluxio 3.配置 Alluxio 4.验证 Alluxio 运行环境 5…

macOS系统下编译linux-adk源码

1.下载 linux-adk源码 https://github.com/gibsson/linux-adk.git 2.安装libusb库 brew install libusb 3.修改Makefile CFLAGS += -Isrc -I/usr/local/Cellar/libusb/1.0.26/include/libusb-1.0 4.编译 make ./linux-adk -h 查看用法 查看系统已连接USB设备 system_p…

Spring Data Redis操作Redis

在Spring Boot项目中&#xff0c;可以使用Spring Data Redis来简化Redis操作&#xff0c;maven的依赖坐标&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></…