鼠标移入盒子，盒子跟随鼠标移动
demo效果：
鼠标移入盒子，按下鼠标,开启移动跟随移动模式,再次按下关闭移动模式
涉及主要属性
在元素上单击鼠标按钮时输出鼠标指针的坐标：
var x = event.pageX; // 获取水平坐标
var y = event.pageY; // 获取垂直坐标
元素offsetLeft和offsetTop属性：
相当于最近一个有定位的父元素而言的位置，如果父元素没有定位则相当于body的x,y位置。
还有元素的offsetXXX属性不能修改只能用来读取（比如不能写：元素.offsetLeft=200）,所以如果要使用（元素.style.xxx）来修改对应的原始位置
元素的offsetXXX和元素的style属性的区别：
1、offsetXX属性只读，style属性可以修改（最主要的区别）
2、offsetXX可以获取任何样式表上的样式，style属性则只能获取style=‘xxx’（行内样式）
3、还有其他的区别可以自己去搜搜嘻嘻
思路：
1、鼠标移入盒子，按下鼠标：开始计算在盒子的相对位置relativeX，relativeY
2、监听鼠标在盒子里面的移动（盒子和鼠标的位置关系始终保持不变）
3、根据鼠标位置和鼠标相对于盒子的位置计算得出当前盒子位置
4、鼠标再次点击取消跟随移动
具体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清楚浏览器样式 */*{margin: 0;border: 0;}.box{width: 300px;height: 300px; background-color: brown;position: relative;left: 200px;top: 200px;}</style>
</head>
<body><div class="box" id="box"></div><script >let boxEl = document.getElementById('box')let relativeX = 0let relativeY = 0let needMoving = false// 盒子跟随鼠标移动boxEl.addEventListener('click',(event)=>{// 盒子内部点击 修改是否跟随鼠标移动needMoving = !needMoving//计算相对位置if(needMoving){boxEl.style.cursor = 'grab'boxMoveWithMouse(event,boxEl)document.addEventListener('mousemove', changeElXY)}else{relativeX = 0relativeY = 0boxEl.style.cursor = 'default'// 移除鼠标移动事件document.removeEventListener('mousemove', changeElXY);}})// 鼠标移入盒子 盒子跟随鼠标移动function boxMoveWithMouse(e,el){// 鼠标在文档位置let pageX = e.pageXlet pageY = e.pageY// 盒子在文档位置let boxOffX = el.offsetLeftlet boxOffY = el.offsetTop// console.log('boxOffX',boxOffX)// console.log('boxOffY',boxOffY)// 盒子在文档相对位置relativeX = pageX - boxOffXrelativeY = pageY - boxOffY// console.log('relativeX',relativeX)// console.log('relativeY',relativeY)}//修改元素位置function changeElXY(event){// //鼠标不在盒子里面if(relativeX<0||relativeY<0){return}let pageX = event.pageXlet pageY = event.pageY// console.log('pageX',pageX)// console.log('pageY',pageY)// 盒子位置let boxX = pageX - relativeXlet boxY = pageY - relativeY// console.log('boxX',boxX)// console.log('boxY',boxY)//修改盒子位置boxEl.style.left = boxX+'px'boxEl.style.top = boxY + 'px'}</script>
</body>
</html>
效果演示
相关文章：
鼠标移入盒子，盒子跟随鼠标移动
demo效果： 鼠标移入盒子，按下鼠标,开启移动跟随移动模式,再次按下关闭移动模式 涉及主要属性 在元素上单击鼠标按钮时输出鼠标指针的坐标： var x event.pageX; // 获取水平坐标 var y event.pageY; // 获取垂直坐标元素offsetL…...
css的简单问题
1.display:none;和visibility:hidden;的区别 相同点：都可以让元素不可见 区别： display:none;可以让元素完成在渲染树中消失，渲染时不占任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间&a…...
使⽤ Override 和 New 关键字进⾏版本控制（C#）
文章目录 1. 基础概念1.1 override1.2 new 2. 示例代码1. override 关键字2. new 关键字 3.完整示例测试3.1 基类和派生类的定义3.2 测试代码3.3 运行结果 结论 在 C# 中，override 和 new 关键字用于控制类之间的成员方法的隐藏和重写。理解它们之间的差异和使用场景…...
JavaScript 15章：模块化编程
在现代软件开发中，模块化编程是一种非常重要的实践，它可以帮助开发者组织代码，提高代码的复用性和可维护性。以下是关于模块化编程的一些关键知识点和实战案例： 第15章：模块化编程 模块的概念 模块是指将一组相关的…...
qt creator 开发环境的安装
1.找官网 官网地址：Installation | Qt Creator Documentation 点 Parent Directory 继续点 Parent Directory 点 archive/ 2.下载在线安装器 点 online_ainstallers 选择在线安装器版本 选择对应版本后进入下载列表，根据自己的系统选择下载。 下载后…...
Xilinx远程固件升级（二）——STARTUPE2原语的使用
通过（一）可以看出，对于远程固件升级实际上是通过调用flash不同区域的bit实现，通过golden image和update image共同保障了系统的稳定性。在项目中如果将flash的时钟直接绑定FPGA后进行约束，在综合编译时是无法通过的。这…...
DynamicExpresso
DynamicExpresso 动态Expression 安装包：DynamicExpresso.Core Student.cs public class Student { public int Age { get; set; } public string Name { get; set; } public void Hello() { Con…...
从Naive RAG到Agentic RAG：基于Milvus构建Agentic RAG
检索增强生成（Retrieval-Augmented Generation, RAG）作为应用大模型落地的方案之一，通过让 LLM 获取上下文最新数据来解决 LLM 的局限性。典型的应用案例是基于公司特定的文档和知识库开发的聊天机器人，为公司内部人员快速检索内部…...
Linux 环境chrony设置服务器间时间同步一致
服务器： master01: slave02: slave03: 安装chrony安装： yum -y install chrony 设置以master01为时间服务器，其他服务器同步master01时间 master01的chrony.conf配置: server ntp1.aliyun.com iburst allow all local stratum 10重启ch…...
MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中
MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中 随着虚拟现实(VR)和增强现实(AR)技术的不断发展，越来越多的公司开始关注这个领域。其中，QuestPro2是一款备受关注的头戴式显示器，由MetaCTO公司开发。然而，最近MetaCTO公司宣布…...
)
深度学习 .exp()
在 MXNet 中，.exp() 是 ndarray 对象的方法，用于计算数组中每个元素的指数（e 的幂）。此方法适用于所有类型的 ndarray，并返回一个新的数组，其中每个元素都是相应输入元素的指数。 语法 ndarray.exp() 参…...
从数据管理到功能优化：Vue+TS 项目实用技巧分享
引言 在项目开发过程中，优化用户界面和完善数据处理逻辑是提升用户体验的重要环节。本篇文章将带你一步步实现从修改项目图标、添加数据、优化日期显示，到新增自定义字段、调整按钮样式以及自定义按钮跳转等功能。这些操作不仅提升了项目的可视化效果&am…...
SSD |（六）FTL详解（上）
文章目录 📚FTL综述📚映射管理🐇映射的种类🐇映射的基本原理🐇HMB🐇映射表写入 📚FTL综述 当SSD所使用的主控和闪存确定后，FTL算法的好坏将直接决定SSD在性能、可靠性、耐用性等方面…...
程序报错：ModuleNotFoundError: No module named ‘code.utils‘； ‘code‘ is not a package
程序报错内容： Traceback (most recent call last): File "code/nli_inference/veracity_prediction.py", line 10, in <module> from code.utils.data_loader import read_json ModuleNotFoundError: No module named code.utils; code is …...
【closerAI ComfyUI】电商模特一键换装解决方案来了！细节到位无瑕疵！再加上flux模型加持，这个工作流不服不行！
不得了了兄弟们。这应该是电商界的福音，电商模特一键换装解决方案来了！细节到位无瑕疵！再加上flux模型加持，这个工作流不服不行！ 这期我们主要讨论如何使用stable diffusion comfyUI 制作完美无瑕疵的换装工作流。** …...
【优选算法篇】编织算法的流动诗篇：滑动窗口的轻盈之美
文章目录 C 滑动窗口详解：基础题解与思维分析前言第一章：热身练习1.1 长度最小的子数组解法一（暴力求解）解法二（滑动窗口）滑动窗口的核心思想图解分析滑动窗口的有效性时间复杂度分析易错点提示 1.2 无重复…...
Linux 常用打包和压缩格式命令（tar tar.gz tar.bz2 tar.xz zip）
Linux 常用打包和压缩格式命令（tar tar.gz tar.bz2 tar.xz zip） 常用压缩包： tar 仅打包，不压缩。 gzip 使用DEFLATE算法进行压缩,通常用于.gz或.tar.gz文件。 bzip2 使用Burrows-Wheeler算法进行压缩,通常用于.bz2或.tar.bz2文件…...
Scala入门基础（12）抽象类
抽象类，制定标准，不要求去具体实现 包含了抽象方法的类就是抽象类。抽象方法只是有方法名，没有具体方法体的方法 定义抽象类要用abstract（抽象）关键字 用智能驾驶技术举例：演示）…...
unity静态批处理
unity静态批处理 静态批处理要求和兼容性渲染管线兼容性 使用静态批处理在构建时进行静态批处理在构建时执行静态批处理的步骤： 在运行时进行静态批处理性能影响 静态批处理 静态批处理是一种绘制调用批处理方法，它将不移动的网格组合在一起，…...
python项目实战——下载美女图片
python项目实战——下载美女图片 文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数 获取目录页的链接 完善代码注意事项 完整代码 import requests import re import…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...