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

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>

效果演示

在这里插入图片描述

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

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

相关文章

十、pico+Unity交互开发教程——射线抓取与更多交互功能

一、回顾与引入 回顾上一篇直接抓取的教程&#xff0c;VR交互一般需要可交互的对象&#xff08;Interactable&#xff09;和发起交互的对象&#xff08;Interactor&#xff09;。直接抓取和射线抓取的可交互对象无区别&#xff0c;可参考上一篇教程设置组件。两者区别在于发起…

NVR小程序接入平台/设备EasyNVR多个NVR同时管理的高效解决方案

在当今的数字化安防时代&#xff0c;视频监控系统的需求日益复杂和多样化。为了满足不同场景下的监控需求&#xff0c;一种高效、灵活且兼容性强的安防视频监控平台——NVR批量管理软件/平台EasyNVR应运而生。本篇探讨这一融合所带来的创新与发展。 一、NVR监测软件/设备EasyNV…

J.D商品详情,一“网”打尽 —— PHP爬虫API数据获取全攻略

在当今数字化时代&#xff0c;数据已成为最宝贵的资源之一。对于电商平台而言&#xff0c;实时掌握商品的详细信息&#xff0c;如同拥有了解锁市场动态的金钥匙。J.D&#xff0c;作为中国领先的电商平台&#xff0c;其商品详情数据的获取&#xff0c;更是电商领域的一大热点。本…

麒麟V10、UOS系统实现在线合并多个Word文件

不管是将多个Word文件插入到Word模板指定位置&#xff0c;生成一个合并文档&#xff0c;还是将多个Word文档插入到一个空白的Word文件中&#xff0c;首尾连接成一篇文档&#xff0c;都需要用到PageOffice提供的数据区域插入Word文档功能。 在实际项目开发中&#xff0c;以下场景…

【前端】如何制作一个自己的网页(18)定义列表

三、定义列表&#xff08;Definition List&#xff09; 除了有序和无序列表&#xff0c;还有一种HTML列表类型&#xff0c;被称为定义列表。 应用场景&#xff1a;对某个术语或内容进行解释和描述&#xff0c;所以由标题和描述两部分组成&#xff0c;描述是对标题的解释和说明…

docker harbor

文章目录 一&#xff0c;搭建私有仓库1.1下载registry1.2在 daemon.json 中添加私有镜像仓库地址1.3重新加载重启docker1.4运行容器1.5拉取一个centos7镜像1.6给镜像加标签1.7上传镜像1.8显示私有仓库的所有镜像1.8查看私有仓库的 centos 镜像有哪些tag 二&#xff0c;什么是ho…

Linux Redis查询key与移除日常操作

维护老项目Express node 编写的后端程序、有这么一个方法、没有设置redis过期时间&#xff08;建议设置过期时间&#xff0c;毕竟登录生产服务器并不是每个人都有权限登录的&#xff01;&#xff01;&#xff01;&#xff09;。如果变动只能通过登录生产服务器、手动修改… 于…

你还在使用存储过程吗?

上周&#xff0c;reddit 网 r/dotnet 区的网友 technolang 发帖&#xff1a;「你还在使用存储过程吗&#xff1f;」 我很好奇为什么 2024 年了我们还在使用存储过程。难道网络应用中没有一个业务层来处理所有事情吗&#xff1f;依赖 DBA 并在数据库层创建依赖关系似乎没有必要。…

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据)

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff&#xff08;geogrid&#xff0c;WPS所需数据&#xff09; 数据准备&#xff1a;以叶面积指数LAI为例QGis实操&#xff1a;基于GIS4WRF插件将geotiff数据转为tiff警告&#xff1a;GIS4WRF: Input layer had an unexpected …

ONLYOFFICE 文档8.2版本已发布:PDF 协作编辑、改进界面、性能优化等更新

ONLYOFFICE 在线编辑器最新版本已经发布&#xff0c;其中包含30多个新功能和500多个错误修复。阅读本文了解所有更新。 关于 ONLYOFFICE 文档 ONLYOFFICE 是一个开源项目&#xff0c;专注于高级和安全的文档处理。坐拥全球超过 1500 万用户&#xff0c;ONLYOFFICE 是在线办公领…

2024年 Spring Boot 系列学习宝典!!!!!

欢迎来到Spring Boot的世界&#xff01;本系列文章旨在为开发者提供从入门到精通的全面指导&#xff0c;无论你是Spring Boot新手还是有经验的开发者&#xff0c;都能在这里找到有价值的内容。让我们一起踏上这段旅程&#xff0c;探索如何使用Spring Boot构建高效、可扩展的应用…

Redis底层和缓存雪崩,击穿,穿透

一、Redis的数据结构 1.动态字符串 我们知道Redis中保存的Key是字符串&#xff0c;value往往hi字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。不过&#xff0c;Redis 没有直接使用c语言的字符串&#xff0c;因为c语言字符串存在许多问题&#xff1a; …

蚁剑连接本地木马文件报错

项目场景&#xff1a; 本地搭建php和蚁剑环境&#xff0c;连接本地木马文件ma.php 问题描述 使用蚁剑连接localhost时报错 错误{ "address":"127.0.0.1" "code":"ECONNREFUSED", "errno":"ECONNREFUSED", &qu…

【Kubernetes实战】Kubernetes集群搭建(虚拟机环境,一主两从)

目录 一、 以Node1节点为例创建虚拟机二、 环境初始化三、集群所需组件安装1. docker&#xff08;18.06.3&#xff09;2. 安装Kubernetes组件 四、安装Kubernetes集群1. 准备集群镜像2. 集群初始化3. 安装网络插件 五、环境测试(服务部署) 集群规模&#xff1a;一主二从(一个ma…

云计算实验1——基于VirtualBox的Ubuntu安装和配置

实验步骤 1、VirtualBox的安装 本实验使用VirtualBox-7.0.10 进行演示。对于安装包&#xff0c;大家可以前往 VirtualBox官网下载页面(https :/ / www. virtualbox.org/wiki/Downloads)下载其7.0版本安装包进行安装&#xff0c;或者直接使用QQ群的安装包VirtualBox-7.0.10-15…

数字英文验证码识别 API 对接说明

本文将介绍一种 数字英文验证码识别 API 对接说明&#xff0c;它是基于深度学习技术&#xff0c;可用于识别变长英文数字验证码。输入验证码图像的内容&#xff0c;输出验证码结果。 接下来介绍下 数字英文验证码识别 API 的对接说明。 申请流程 要使用 API&#xff0c;需要…

腾讯地图SDK 手势失效或冲突的解决办法

前言 由于高德地图sdk开始涨价割韭菜了&#xff0c;因此&#xff0c;我司在降本增效的大背景下&#xff0c;需要把高德地图换成腾讯地图。 在更换sdk过程中&#xff0c;踩了一些关于地图手势事件的坑&#xff0c;这里记录下&#xff0c;希望能给遇到同样问题的大佬们一个思路。…

21、基于Firefly-rk3399字符设备驱动寄存器控制LED

文章目录 一、电路分析引脚配置功能(R/W register) 二、RK3399数据手册分析&#xff1a;1、GPIO(General-purpose input/output)介绍&#xff1a;2、CRU(Clock & Reset Unit)介绍查找GPIO相关内容&#xff1a; 3、PMU(Power Management Uni)4、GRF&#xff08;General Regi…

git 报错 SSL certificate problem: certificate has expired

git小乌龟 报错 SSL certificate problem: certificate has expired 场景复现&#xff1a; 原因&#xff1a; 这个错误表明你在使用Git时尝试通过HTTPS进行通信&#xff0c;但是SSL证书已经过期。这通常发生在使用自签名证书或证书有效期已到期的情况下。 解决方法: 1.如果是…

WTN6 E 系列语音芯片 单线时序及示例代码

1. 概述: WTN6 系列为多功能&#xff0c;低功耗&#xff0c;高性能的 CMOS 语音芯片。现有 WTN6020E、WTN6040E、 WTN6080E、WTN6170E 四种芯片&#xff08;语音长度分别为 20s、40s、80s、170s&#xff09;&#xff0c;已投入市场。 音频采样率目前最高可达 32kHz&#xff0…