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

鼠标移入盒子,盒子跟随鼠标移动

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效果&#xff1a; 鼠标移入盒子&#xff0c;按下鼠标,开启移动跟随移动模式,再次按下关闭移动模式 涉及主要属性 在元素上单击鼠标按钮时输出鼠标指针的坐标&#xff1a; var x event.pageX; // 获取水平坐标 var y event.pageY; // 获取垂直坐标元素offsetL…...

css的简单问题

1.display:none;和visibility:hidden;的区别 相同点&#xff1a;都可以让元素不可见 区别&#xff1a; display:none;可以让元素完成在渲染树中消失&#xff0c;渲染时不占任何空间&#xff1b;visibility:hidden;不会让元素从渲染树消失&#xff0c;渲染元素继续占据空间&a…...

使⽤ Override 和 New 关键字进⾏版本控制(C#)

文章目录 1. 基础概念1.1 override1.2 new 2. 示例代码1. override 关键字2. new 关键字 3.完整示例测试3.1 基类和派生类的定义3.2 测试代码3.3 运行结果 结论 在 C# 中&#xff0c;override 和 new 关键字用于控制类之间的成员方法的隐藏和重写。理解它们之间的差异和使用场景…...

JavaScript 15章:模块化编程

在现代软件开发中&#xff0c;模块化编程是一种非常重要的实践&#xff0c;它可以帮助开发者组织代码&#xff0c;提高代码的复用性和可维护性。以下是关于模块化编程的一些关键知识点和实战案例&#xff1a; 第15章&#xff1a;模块化编程 模块的概念 模块是指将一组相关的…...

qt creator 开发环境的安装

1.找官网 官网地址&#xff1a;Installation | Qt Creator Documentation 点 Parent Directory 继续点 Parent Directory 点 archive/ 2.下载在线安装器 点 online_ainstallers 选择在线安装器版本 选择对应版本后进入下载列表&#xff0c;根据自己的系统选择下载。 下载后…...

Xilinx远程固件升级(二)——STARTUPE2原语的使用

通过&#xff08;一&#xff09;可以看出&#xff0c;对于远程固件升级实际上是通过调用flash不同区域的bit实现&#xff0c;通过golden image和update image共同保障了系统的稳定性。在项目中如果将flash的时钟直接绑定FPGA后进行约束&#xff0c;在综合编译时是无法通过的。这…...

DynamicExpresso

DynamicExpresso 动态Expression 安装包&#xff1a;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

检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;作为应用大模型落地的方案之一&#xff0c;通过让 LLM 获取上下文最新数据来解决 LLM 的局限性。典型的应用案例是基于公司特定的文档和知识库开发的聊天机器人&#xff0c;为公司内部人员快速检索内部…...

Linux 环境chrony设置服务器间时间同步一致

服务器&#xff1a; master01: slave02: slave03: 安装chrony安装&#xff1a; yum -y install chrony 设置以master01为时间服务器&#xff0c;其他服务器同步master01时间 master01的chrony.conf配置: server ntp1.aliyun.com iburst allow all local stratum 10重启ch…...

MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中

MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中 随着虚拟现实(VR)和增强现实(AR)技术的不断发展&#xff0c;越来越多的公司开始关注这个领域。其中&#xff0c;QuestPro2是一款备受关注的头戴式显示器&#xff0c;由MetaCTO公司开发。然而&#xff0c;最近MetaCTO公司宣布…...

深度学习 .exp()

在 MXNet 中&#xff0c;.exp() 是 ndarray 对象的方法&#xff0c;用于计算数组中每个元素的指数&#xff08;e 的幂&#xff09;。此方法适用于所有类型的 ndarray&#xff0c;并返回一个新的数组&#xff0c;其中每个元素都是相应输入元素的指数。 语法 ndarray.exp() 参…...

从数据管理到功能优化:Vue+TS 项目实用技巧分享

引言 在项目开发过程中&#xff0c;优化用户界面和完善数据处理逻辑是提升用户体验的重要环节。本篇文章将带你一步步实现从修改项目图标、添加数据、优化日期显示&#xff0c;到新增自定义字段、调整按钮样式以及自定义按钮跳转等功能。这些操作不仅提升了项目的可视化效果&am…...

SSD |(六)FTL详解(上)

文章目录 &#x1f4da;FTL综述&#x1f4da;映射管理&#x1f407;映射的种类&#x1f407;映射的基本原理&#x1f407;HMB&#x1f407;映射表写入 &#x1f4da;FTL综述 当SSD所使用的主控和闪存确定后&#xff0c;FTL算法的好坏将直接决定SSD在性能、可靠性、耐用性等方面…...

程序报错:ModuleNotFoundError: No module named ‘code.utils‘; ‘code‘ is not a package

程序报错内容&#xff1a; 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模型加持,这个工作流不服不行!

不得了了兄弟们。这应该是电商界的福音&#xff0c;电商模特一键换装解决方案来了&#xff01;细节到位无瑕疵&#xff01;再加上flux模型加持&#xff0c;这个工作流不服不行&#xff01; 这期我们主要讨论如何使用stable diffusion comfyUI 制作完美无瑕疵的换装工作流。** …...

【优选算法篇】编织算法的流动诗篇:滑动窗口的轻盈之美

文章目录 C 滑动窗口详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;热身练习1.1 长度最小的子数组解法一&#xff08;暴力求解&#xff09;解法二&#xff08;滑动窗口&#xff09;滑动窗口的核心思想图解分析滑动窗口的有效性时间复杂度分析易错点提示 1.2 无重复…...

Linux 常用打包和压缩格式命令(tar tar.gz tar.bz2 tar.xz zip)

Linux 常用打包和压缩格式命令&#xff08;tar tar.gz tar.bz2 tar.xz zip&#xff09; 常用压缩包&#xff1a; tar 仅打包&#xff0c;不压缩。 gzip 使用DEFLATE算法进行压缩,通常用于.gz或.tar.gz文件。 bzip2 使用Burrows-Wheeler算法进行压缩,通常用于.bz2或.tar.bz2文件…...

Scala入门基础(12)抽象类

抽象类&#xff0c;制定标准&#xff0c;不要求去具体实现 包含了抽象方法的类就是抽象类。抽象方法只是有方法名&#xff0c;没有具体方法体的方法 定义抽象类要用abstract&#xff08;抽象&#xff09;关键字 用智能驾驶技术举例&#xff1a;演示&#xff09…...

unity静态批处理

unity静态批处理 静态批处理要求和兼容性渲染管线兼容性 使用静态批处理在构建时进行静态批处理在构建时执行静态批处理的步骤&#xff1a; 在运行时进行静态批处理性能影响 静态批处理 静态批处理是一种绘制调用批处理方法&#xff0c;它将不移动的网格组合在一起&#xff0c…...

python项目实战——下载美女图片

python项目实战——下载美女图片 文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数 获取目录页的链接 完善代码注意事项 完整代码 import requests import re import…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...