当前位置: 首页 > news >正文

设置弹窗随鼠标位置移动

 1.这是要移动的弹窗,隐藏显示逻辑、样式、展示内容自己写,主要就是动态设置弹窗的style,floatLeft和floatTop都是Vue中的data双向绑定数据;

<div id="box" v-show="hasMove" :style="{ left: floatLeft + 'px', top: floatTop + 'px' }"><p>{{ Math.round(distanceSum) }}米</p>
</div>

2.计算弹窗位置主要就是拿到鼠标位置屏幕坐标系和弹窗左上角位置绑定,但是要注意设置鼠标位置在四周边缘的时候, 弹窗不应该被屏蔽遮挡到;

window.addEventListener("mousemove", function (e) {// 设置鼠标位置和弹窗左上角的位置that.floatLeft = e.pageX + 10;that.floatTop = e.pageY - 30;// 解决不同浏览器可视区域参数不统一的问题let width =e.view.innerWidth > e.view.outerWidth? e.view.innerWidth: e.view.outerWidth;// 设置鼠标位置在屏幕右侧的时候弹窗位置if (e.pageX > width - 100) {that.floatLeft = width - 100;}// 设置鼠标位置在屏幕上边的时候弹窗位置if (e.pageY < 20) {that.floatTop = e.pageY;}// 设置鼠标位置在屏幕下边的时候弹窗位置if (e.pageY > e.view.outerHeight - 10) {that.floatTop = e.view.outerHeight - 20;}
});

相关文章:

设置弹窗随鼠标位置移动

1.这是要移动的弹窗&#xff0c;隐藏显示逻辑、样式、展示内容自己写&#xff0c;主要就是动态设置弹窗的style&#xff0c;floatLeft和floatTop都是Vue中的data双向绑定数据&#xff1b; <div id"box" v-show"hasMove" :style"{ left: floatLeft…...

Spring Boot实现数据加密脱敏:注解 + 反射 + AOP

文章目录 1. 引言2. 数据加密和脱敏的需求3. Spring Boot项目初始化4. 敏感数据加密注解设计5. 实现加密和脱敏的工具类6. 实体类和加密脱敏注解的使用7. 利用AOP实现加密和脱敏8. 完善AOP切面9. 测试10. 拓展功能与未来展望10.1 加密算法的选择10.2 动态注解配置 11. 总结 &am…...

jmeter和meterSphere如何使用第三方jar包

工具引用jar包语言都是beanshell 问题起因&#xff1a;metersphere 接口自动化实现过程中&#xff0c;如何实现字符串加密且加密方法依赖第三方库&#xff1b; 使用语言&#xff1a;beanshell脚本语言&#xff0c;java语言 使用工具&#xff1a;idea jmeter metersphere 1.首…...

API对象上千个,有啥关联性,kubectl-tree一键搞定

关注【云原生百宝箱】公众号&#xff0c;获取更多云原生消息 "kubectl-tree 是一款强大的 kubectl 插件&#xff0c;通过 ownerReferences 实现 Kubernetes 对象之间的所有权关系探索。相较于 kubectl lineage&#xff0c;它不仅更全面理解 API 对象的逻辑关系&#xff0c…...

java自定义工具类在List快速查找相同字段值对象

根据对象某一字段名&#xff0c;获取字段值&#xff0c;将List转换为Map中包含list&#xff0c;Key为字段值&#xff0c;Value为相同字段值的对象list&#xff0c;快速定位具有相同字段值的对象&#xff0c;转换之后便于在Map中根据字段值快速查找相同字段值的对象 //List转Map…...

codeforces Hello 2024 - C - Grouping Increases --- 题解

目录 Grouping Increases 题目描述&#xff1a; 思路解析&#xff1a; 代码实现&#xff1a; Grouping Increases 题目描述&#xff1a; 给你一个大小为n的数组a&#xff0c;你可以把数组a划分为两个子序列s和t&#xff0c;a中元素&#xff0c;要么在子序列s中&#xff0c;…...

STM32H5培训(一)总览

文章目录 1. 前言2. STM32H5系列MCU的特点和新功能包括性能提升、新外设和安全功能等3. STM32H5系列型号之间的区别和关键资源对比4. 性能和功能亮点6. 开发生态参考&#xff1a; 1. 前言 本篇主要介绍STM32H5系列MCU的特点和新功能&#xff0c;包括全新的M33内核、250M主频处…...

亚马逊云科技 WAF 部署小指南(五):在客户端集成 Amazon WAF SDK 抵御 DDoS 攻击...

方案介绍 在 WAF 部署小指南&#xff08;一&#xff09;中&#xff0c;我们了解了 Amazon WAF 的原理&#xff0c;并通过创建 WEB ACL 和托管规则防护常见的攻击。也了解了通过创建自定义规则在 HTTP 请求到达应用之前判断是阻断还是允许该请求。在 Amazon WAF 自定义规则中&am…...

高光谱分类论文解读分享之基于多模态融合Transformer的遥感图像分类方法

IEEE TGRS 2023&#xff1a;基于多模态融合Transformer的遥感图像分类方法 题目 Multimodal Fusion Transformer for Remote Sensing Image Classification 作者 Swalpa Kumar Roy , Student Member, IEEE, Ankur Deria , Danfeng Hong , Senior Member, IEEE, Behnood Ras…...

Trans论文复现:基于数据驱动的新能源充电站两阶段规划方法程序代码!

适用平台&#xff1a;MatlabYalmipCplex/Gurobi&#xff1b; 文章提出了一种电动汽车充电站的两阶段规划方法&#xff0c;第一阶段通过蒙特卡洛法模拟充电车辆需求和电池充放电数据来确定充电站位置&#xff1b;第二阶段通过数据驱动的分布鲁棒优化方法优化充电站的新能源和电池…...

将抖音视频转成MP3并下载

这篇是在上一篇的基础上写的&#xff0c;这篇负责抖音作者详情页的视频转声音提取&#xff0c;这篇需要用到后端。 本地启动后端后&#xff0c;在控制台输入对应代码&#xff0c;即可实现hover在封面上&#xff0c;按d一键下载音频 控制台代码 // 获取作者的视频列表var liEle…...

C程序训练:与输入有关的错误

在录入程序时有时稍不注意就可能录入错误的字符导致程序运行结果出现错误&#xff0c;下面举例说明。 下面程序的运行结果是错的&#xff0c;但程序又没有错&#xff0c;到底问题出现在哪呢&#xff1f; #include <stdio.h> int main() {FILE *fp;int i, k, n;fpfopen(…...

制作 CentOS Stream9 的U盘系统启动盘

一、简述 注:请勿用于商用&#xff0c;如有版权纠纷&#xff0c;于博主无任何关系。&#xff08;仅用于学习研究使用&#xff09; 由于CentOs Linux 7和CentOs Stream8终止日期是2024年&#xff0c;需要将系统升级到最新版本的CentOs Stream9&#xff0c;下面是刻录系统盘的操…...

Vulnhub靶机:driftingblues 1

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;driftingblues1&#xff08;10.0.2.17&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entr…...

CloudCompare——点云空间圆拟合

目录 1.概述2.软件实现3.完整操作4.算法源码5.相关代码 本文由CSDN点云侠原创&#xff0c;CloudCompare——点云空间圆拟合&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫与GPT生成的文章。 1.概述 CloudCompare软件中的To…...

解决POI报错POIXMLTypeLoader不存在的问题

问题&#xff1a; springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is java.lang.NoClassDefFoundError: org/apache/poi/POIXMLTypeLoaderat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet…...

关于rewriteBatchedStatements的源码分析

在之前的优惠券兑换码需求中&#xff0c;涉及批量写入问题&#xff0c;其中有一个关键的连接配置参数非常重要——rewriteBatchedStatements&#xff0c;当该值配置为true时&#xff0c;Statement将可能对批量插入sql进行重写。 何谓重写&#xff1f;原来提交的批量执行语句&a…...

自动化神器 Playwright 的 Web 自动化测试解决方案

1. 主流框架的认识 总结&#xff1a; 由于Selenium在3.x和4.x两个版本的迭代中并没有发生多大的变化&#xff0c;因此Selenium一统天下的地位可能因新框架的出现而变得不那么稳固。后续的Cypress、TestCafe、Puppeteer被誉为后Selenium时代Web UI自动化的三驾马车。但是由于这三…...

docker filebeat 将日志多级目录和多维json数据日志同步到es

注 使用的时候先调试调试配置,调试成功在尝试写入es,如果es写入失败就是es账户.密码/白名单.和index未创建的问题,细节可以留言 setup.template.priority 模板优先级 调整这个可以配置一台机器多个filebeat 容器启动 多级目录日志和多维josn日志结构 filebeat.inputs:- typ…...

【机器学习】模型参数优化工具:Optuna使用分步指南(附XGB/LGBM调优代码)

常用的调参方式和工具包 常用的调参方式包括网格搜索(Grid Search)、**随机搜索(Random Search)和贝叶斯优化(Bayesian Optimization)**等。 工具包方面&#xff0c;Scikit-learn提供了GridSearchCV和RandomizedSearchCV等用于网格搜索和随机搜索的工具。另外&#xff0c;有一…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...