设置弹窗随鼠标位置移动

 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;}
});

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

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

相关文章

C语言理解

目录 计算机语言算法C项目创建C程序框架经典实例 计算机语言 程序是用特殊的编程语言&#xff08;这里是C语言&#xff09;写出来表达如何解决问题的不是用编程语言来和计算机交谈&#xff0c;而是描述要求它如何做事情的过程或方法程序是问题的载体&#xff0c;程序的执行就是…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-6 线性控制器设计Linear Controller Design

本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-6 线性控制器设计Linear Controller Design

跨平台的文件传输协议@windows端服务器的配置@smb协议共享方案@ftp服务器设置

文章目录 abstractrefs ftp server下面是核心步骤FAQ smb server设置方法右键设置共享文件夹查看所有已经共享的文件夹停止某个文件的共享 共享文件夹的访问控制补充匿名访问问题协议相关信息参考android客户端推荐FAQ不同用户文件无法访问 比较和总结其他用户访问smb服务器共享…

【LV12 DAY15 WDT】

WDT简介 看门狗定时器&#xff0c;其主要作用是发生软件故障时可产生复位信号使SOC复位&#xff0c;其本质上是一个计数器。 #include "exynos_4412.h"void delay(unsigned int time){while(time--);}int main(){//设置一级分频//WDT.WTCONWDT.WTCON | (0X4e<&l…

【flink番外篇】13、Broadcast State 模式示例-简单模式匹配(1)

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分&#xff0c;比如术语、架构、编程模型、编程指南、基本的…

优惠券兑换码生成需求——事务同步回调问题分析

前段时间收到一个优惠券兑换码的需求&#xff1a;管理后台针对一个优惠券发起批量生成兑换码&#xff0c;这些兑换码可以导出分发到各个合作渠道&#xff08;比如&#xff1a;抖音、京东等&#xff09;&#xff0c;用户通过这些渠道获取到兑换码之后&#xff0c;再登录到我司研…

基于Docker官方php:7.4.33-fpm镜像构建支持67个常见模组的php7.4.33镜像

实践说明&#xff1a;基于RHEL7(CentOS7.9)部署docker环境(23.0.1、24.0.2)&#xff0c;所构建的php7.4.33镜像应用于RHEL7-9(如AlmaLinux9.1)&#xff0c;但因为docker的特性&#xff0c;适用场景是不限于此的。 文档形成时期&#xff1a;2017-2023年 因系统或软件版本不同&am…

鸿鹄云商B2B2C:JAVA实现的商家间直播带货商城系统概览

【saas云平台】打造全行业全渠道全场景的saas产品&#xff0c;为经营场景提供一体化解决方案&#xff1b;门店经营区域化、网店经营一体化&#xff0c;本地化、全方位、一站式服务&#xff0c;为多门店提供统一运营解决方案&#xff1b;提供丰富多样的营销玩法覆盖所有经营场景…

Flink集成Hive之Hive Catalog

流程流程: Flink消费Kafka,逻辑处理后将实时流转换为表视图,利用HiveCataLog创建Hive表,将实时流 表insert进Hive,注意分区时间字段需要为 yyyy-MM-dd形式,否则抛出异常:java.time.format.DateTimeParseException: Text 20240111 could not be parsed 写入到hive分区表 strea…

在 CentOS 7上创建本地 YUM 仓库,并且提供给其它服务器做yum源

在 CentOS 7.6 上创建本地 YUM 仓库的步骤如下&#xff1a; 上传 CentOS 镜像文件&#xff1a; 确保你已经将 CentOS 7.6 的 ISO 镜像文件上传到了服务器上。例如&#xff0c;假设你已经上传到 /path/to/your/iso 路径。 挂载 ISO 镜像&#xff1a; 你需要将 ISO 镜像文件挂载…

数据库与低代码:加速开发,提升效率的完美结合

随着技术的不断进步&#xff0c;数据库和低代码开发成为了现代应用程序开发中的两大关键要素。本文将探讨如何通过结合数据库和低代码开发&#xff0c;加速应用程序的开发过程&#xff0c;并提高开发效率和质量。 在过去的几十年中&#xff0c;数据库一直被视为应用程序开发中不…

使用srs_librtmp实现RTMP推流

1、背景 由于项目有需求在一个现有的产品上增加RTMP推流的功能&#xff0c;目前只推视频流。 2、方案选择 由于是在现有的产品上新增功能&#xff0c;那么为了减少总的成本&#xff0c;故选择只动应用软件的来实现需求。 现有的产品中的第三方库比较有限&#xff0c;连个ffmp…

Linux CentOS 7.6安装nginx详细保姆级教程

一、通过wget下载nginx压缩包 1、进入home文件并创建nginx文件夹用来存放nginx压缩包 cd /home //进入home文件夹 mkdir nginx //创建nginx文件夹 cd nginx //进入nginx文件夹2、下载nginx,我这里下载的是Nginx 1.24.0版本&#xff0c;如果要下载新版本可以去官网进行下载:…

堆排序(Java语言)

视频讲解地址&#xff1a;【手把手带你写十大排序】7.堆排序&#xff08;Java语言&#xff09;_哔哩哔哩_bilibili 代码&#xff1a; public class HeapSort {public void swap(int[] array, int index1, int index2) {array[index1] array[index1] ^ array[index2];array[i…

回归预测 | Matlab基于SMA+WOA+SFO-LSSVM多输入单输出回归预测

回归预测 | Matlab基于SMAWOASFO-LSSVM多输入单输出回归预测 目录 回归预测 | Matlab基于SMAWOASFO-LSSVM多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 SMAWOASFO-LSSVM回归预测 基于黏菌算法鲸鱼算法向日葵算法优化LSSVM回归预测 其中包含三种改进…

RSIC-V“一芯”学习笔记(一)——概述

考研的文章和资料之后想写的时候再写怕趴 文章目录 一、阶段设计二、环境、开发语言和工具三、最重要的两个观念四、处理器芯片设计五、处理器芯片设计包含很多软件问题六、处理器芯片的评价指标七、复杂系统的构建和维护八、专业世界观九&#xff0c;提问的艺术(提问模板)十、…

pandas创建一个新的dataframe对象

import pandas as pd df pd.DataFrame() print(df)

ddos攻击会让服务器受到什么影响?-速盾网络(sudun)

DDoS攻击是一种网络攻击手段&#xff0c;它通过利用大量的请求或恶意流量超过服务器的处理能力&#xff0c;从而导致服务器无法正常工作或服务质量显著下降。 首先&#xff0c;DDoS攻击会对服务器的带宽造成极大的压力。攻击者会利用大量的机器或网络资源发起攻击&#xff0c;…

Ubuntu下使用Virtual Box中显示没有可用的USB设备

Ubuntu中使用Virtual Box&#xff0c;但是使用到USB时只有USB1.1可以使用&#xff0c;并且提示没有可以使用的USB设备&#xff0c;解决方法如下 下载并安装Vitrual Box提供的功能扩展包 分别点击帮助->关于&#xff0c;查看当前使用的版本进入到Virtual Box官网下载链接根…

MATLAB中untrace函数用法

目录 语法 说明 untrace函数的功能是在仿真调试会话中移除跟踪点。 语法 untrace blk 说明 untrace blk 从当前仿真调试会话的跟踪点列表中移除块 blk 的跟踪点。每当在仿真调试会话中执行块时&#xff0c;软件会显示与跟踪点对应的块的信息。 当以编程方式启动仿真调试会…