鼠标移入盒子，盒子跟随鼠标移动
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…...
强化学习在并行机构人形机器人控制中的应用
1. 项目概述在机器人控制领域，强化学习(RL)正逐渐成为解决复杂动力学系统问题的有力工具。然而，当面对具有并行驱动机构的人形机器人时，传统RL训练方法往往面临一个关键挑战：大多数仿真环境无法准确模拟闭环运动链(Closed Kinemat…...
多自由度冗余空间机械臂位姿一体化规划与控制【附代码】
✨ 长期致力于空间机械臂、对偶四元数、位姿一体化、路径规划、跟踪控制研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）基于对偶四元数的冗余机械臂运…...
Buzz音频转录完全指南：3大核心功能+5个实战场景，快速掌握本地语音转文字技术
Buzz音频转录完全指南：3大核心功能5个实战场景，快速掌握本地语音转文字技术 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Tr…...
物理引导的机器学习工作流：气候建模的融合创新与实践
1. 项目概述：当气候建模遇见机器学习如果你像我一样，在气候模拟这个领域摸爬滚打超过十年，就会深刻体会到一种“甜蜜的负担”：我们构建的地球系统模型（ESM）越来越精细，物理过程越来越复杂&#…...
Python开发者首次使用Taotoken接入大模型API的完整步骤指南
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Python开发者首次使用Taotoken接入大模型API的完整步骤指南 对于Python开发者而言，接入大模型API进行应用开发已成为一…...
环境光遮蔽（Ambient Occlusion）：揭秘那个让虚拟世界“有重量感“的阴影魔法
一、一个让我"开窍"的老木匠故事 我有个朋友是传统家具的修复师，他给我讲过一个让我至今难忘的故事。他说他刚入行时跟着一位 70 多岁的老木匠师父学习——师父让他做的第一件事不是雕花、不是榫卯——而是"看阴影"——这个看似奇怪的训练改变了…...
Windows 10/11系统下，SecureCRT 8.7.2保姆级安装与激活图文指南（含Keygen使用避坑点）
Windows平台SecureCRT 8.7.2全流程部署与安全配置指南在当今远程运维与网络管理的日常工作中，一款可靠的终端仿真工具如同工程师的瑞士军刀。作为行业标杆的SecureCRT，其8.7.2版本在Windows 10/11环境下的部署却常让新手陷入各种技术陷阱——从安装路径选…...
口碑最好的AI论文写作工具推荐（从文献整理到论文成稿全流程）适合全体毕业生
还在为选题方向纠结、文献资料翻找耗时、开题报告无从下手、论文框架反复修改、查重率居高不下、降重过程痛苦不堪，甚至答辩PPT还要临时抱佛脚？作为学术新手、应届生或本科硕士毕业生，面对论文写作的重重关卡，流程复杂、操作门槛高…...
输电线路在线监测系统｜架空线路安全运行的“第一道防线“！
输电线路微气象监测站是专为高压输电线路、电网廊道、杆塔运维量身打造的专利级一体化微气象智能监测设备。依托双专利超声波探测技术、六要素集成传感架构、无启动风速高精测量、智能抗干扰稳控系统，实现输电线路沿线气象24小时全自动捕捉、动态实时监测、大风风险…...
【2026实测】怎么提高论文原创度？盘点8款主流降AI工具，附结构级优化指南
写文章最怕碰到什么，是辛辛苦苦自己码出来的字，却被标了极高的AI值。目前很多文本审核机制对内容的原创度要求极高，纯手写的初稿也可能因为句式太工整被判定为机器生成的。 为了帮几个快被这事折腾疯了的学弟学妹找条出路，我花了…...