前端学习之DOM编程-案例div移动

这个案例是当你的鼠标按压下去后,div跟着你的鼠标移动而移动,当你的鼠标抬起后,div不随着鼠标移动而移动。类似于电脑移动应用图标的感觉。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div移动</title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color: aqua;position: absolute;}</style>
</head>
<body><div></div><script>let div1 = document.querySelector('div')w = parseInt(getComputedStyle(div1).width)h = parseInt(getComputedStyle(div1).height)div1.onmousedown = function(event){div1.onmousemove = function(event1){div1.style.left = (event1.pageX-w/2) + 'px'div1.style.top = (event1.pageY-h/2) + 'px'}}div1.onmouseup = function(){// 解除DOM0事件绑定div1.onmousemove = nulldiv1.onmousedown = null}</script>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

 

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

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

相关文章

day02-SpringCloud02(Nacos、Feign、Gateway)

1.Nacos 配置管理 Nacos 除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我们需要一种统一配置管理方案&#x…

比例多路阀控制器US-DAT2-A

液压比例阀放大器是一种用于精确控制液压系统的技术&#xff0c;它通过电信号实现对液压阀的连续量控制。接收来自控制器的低功率电信号&#xff0c;然后将其放大并转换为高功率信号&#xff0c;这个高功率信号足以驱动比例阀的开启和关闭。这种技术允许进行非常精细的调节&…

面经分享(Flask,轻量级Web框架)

1. Flask的核心特点 a. 轻量级&#xff1a;核心简洁&#xff0c;只提供了基本的功能&#xff0c;其他高级功能可以通过插件或扩展来添加。 b. 灵活性&#xff1a;允许开发者选择适合自己项目的组件和工具&#xff0c;没有强制的项目结构和设计模式。 c. 易于扩展&#xff1a;提…

深度剖析:网络安全中的红蓝对抗策略

红蓝对抗 红蓝对抗服务方案 在蓝队服务中&#xff0c;作为攻击方将开展对目标资产的模拟入侵&#xff0c;寻找攻击路径&#xff0c;发现安全漏洞和隐患。除获取目标系统的关键信息&#xff08;包括但不限于资产信息、重要业务数据、代码或管理员账号等&#xff09;外&#x…

ubuntu20.04.6将虚拟机用户目录映射为磁盘Z

文章目录 linux虚拟机设置为NAT模式安装sshd服务映射目录到windows磁盘安装samba套件修改配置文件smb.conf重启smbd并设置用户名和密码 windows映射遇到的问题1、设置好之后映射不成功2、smbd下载失败3、smbd密码配置问题4、当有改动时候&#xff0c;最好重启一下smbd服务 linu…

碧桂园服务净利降两成,关联交易收入仅占2.9%,发力增值服务充电桩日进超10万

自2018年分拆上市以来&#xff0c;碧桂园服务经历过非常高速的发展&#xff0c;曾是物管市场的“并购王”&#xff0c;但从2023年开始&#xff0c;希望从外延式的增长向内生式增长转型&#xff0c;将往期的经验与教训&#xff0c;通过投后管理沉淀下来&#xff0c;向高质量发展…

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…

2024年MathorCup妈妈杯数学建模思路C题思路解析+参考成品

1 赛题思路 (赛题出来以后第一时间在群内分享&#xff0c;点击下方群名片即可加群) 2 比赛日期和时间 报名截止时间&#xff1a;2024年4月11日&#xff08;周四&#xff09;12:00 比赛开始时间&#xff1a;2024年4月12日&#xff08;周五&#xff09;8:00 比赛结束时间&…

认知觉醒:开启自我改变的原动力-- 读书笔记

文章目录 关于本书以及作者内容第一章 大脑——一切问题的起源摘抄思考 第二章 生命留给我们的彩蛋摘抄思考 第三章 人类的终极能能力摘抄思考 第四章 专注力——情绪和智慧的交叉地带摘抄思考 第五章 学习力——学习不是一味地努力摘抄思考 第六章 行动力——没有行动世界只是…

DFS:floodfill算法解决矩阵联通块问题

floodfill&#xff0c;翻译为洪水灌溉&#xff0c;而floodfill算法本质上是为了解决在矩阵中性质相同的联通块问题。 一、图像渲染 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int dx[4]{0,0,1,-1};int dy[4]{1,-1,0,0};int prev;//记住初始值int m,…

《QT实用小工具·十六》IP地址输入框控件

1、概述 源码放在文章末尾 该项目为IP地址输入框控件&#xff0c;主要包含如下功能&#xff1a; 可设置IP地址&#xff0c;自动填入框。 可清空IP地址。 支持按下小圆点自动切换。 支持退格键自动切换。 支持IP地址过滤。 可设置背景色、边框颜色、边框圆角角度。 下面…

2023年度总结:允许迷茫,破除迷茫;专注自身,把握当下

0、前言 &#x1f4dc;为什么24年已经过了几个月&#xff0c;才提笔写这年度总结呢&#xff1f;毫不羞愧直问我的内心&#xff0c;其实就是懒罢了。直到前几天朋友看到了我去年写的总结&#xff0c;我自己点进那篇总结&#xff0c;完完整整的看了一遍&#xff0c;又翻看我23年…

力扣Lc28---- 557. 反转字符串中的单词 III(java版)-2024年4月06日

1.题目描述 2.知识点 1)用StringBuilder的方法 实现可变字符串结果 最后返回的时候用.toString的方法 2)在Java中使用StringBuilder的toString()方法时&#xff0c;它会返回StringBuilder对象当前包含的所有字符序列的字符串表示。 在我们的例子中&#xff0c;sb是一个Stri…

Docker基本学习(运维)

一、背景介绍 1.什么是docker Docker&#xff0c;翻译过来就是码头工人 Docker是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可抑制的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化。容器完全使用沙盒…

stm32 HAL中断GPIO——1

1选择引脚为中断 中断详细配置 1 模式选择 上拉下拉 再点击NVIC可进行分组 再勾选如图 总结步骤 1选择中断 2配置时钟//选择外部时钟 3配置模式 4勾选NVIC

目标检测——图像中提取文字

一、重要性及意义 图像提取文本&#xff0c;即光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;在现代社会中的重要性和意义日益凸显。以下是关于图像提取文本的重要性和意义的几个关键方面&#xff1a; 信息获取的效率提升 快速处理大量文档&#xff1a;OCR技术可…

JavaScript权威指南(第7版) 笔记 - 扩展操作符总结

扩展操作符 ... &#xff0c;不是真正意义上的JavaScript操作符。 let str "0123ABC" console.log(typeof ...str);// Uncaught SyntaxError: Unexpected token ... 上面的第2行代码会报错&#xff0c;扩展操作符 ... 只能在数组字面量、对象字面量、函数调用中使…

NASA数据集——北美地区永久冻土影响的冻原和北方生态系统内发生的土壤呼吸作用产生的二氧化碳(CO2)排放量(300 米的空间分辨率)

Soil Respiration Maps for the ABoVE Domain, 2016-2017 简介 文件修订日期&#xff1a;2022-04-20 数据集版本: 1 摘要 该数据集以 300 米的空间分辨率提供了 2016-08-18 至 2018-09-12 期间阿拉斯加和加拿大西北部受永久冻土影响的冻原和北方生态系统内发生的土壤呼吸作…

基于Springboot学生就业管理系统

采用技术 基于Springboot学生就业管理系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 前台功能 网站首页 学生注册 企业招聘 求职信息 个人中心…

4.1 JavaScript的使用

JavaScript有两种使用方式&#xff1a;一是在HTML文档中直接添加代码&#xff1b;二是将JavaScript脚本代码写到外部的JavaScript文件中&#xff0c;再在HTML文档中引用该文件的路径地址。 这两种使用方式的效果完全相同&#xff0c;可以根据使用率和代码量选择相应的开发方式。…