可移动的div

一、实验题目

做一个可移动的div

二、实验代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color: rebeccapurple;}</style></head><body><div></div><script>let div=document.querySelector("div")div.style.position="absolute"w=parseInt(getComputedStyle(div).width)h=parseInt(getComputedStyle(div).height)div.onmousedown=function(event){div.onmousemove=function(ev){console.log(ev.offsetX)console.log(ev.offsetY)div.style.left=(ev.pageX-w/2)+"px"div.style.top=(ev.pageX-h/2)+"px"}}div.onmouseup=function(){div.onmousemove=null}</script></body>
</html>

三、实验效果

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

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

相关文章

【操作系统】BIOS与MBR之间的过渡实践

一&#xff0e;概述 根据以前写的一篇文章&#xff1a;【操作系统】MBR主引导目录结构以及作用&#xff0c;我们了解到BIOS在检测完内存、显卡&#xff0c;把硬盘等一系列外设简单检测之后&#xff0c;下一步将和主引导程序MBR进行交接&#xff0c;将主控权交付给下一位嘉宾&am…

js viewer 图片浏览器

示例1 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><script src"js/viewer.min.js"></script><link rel"stylesheet" href"css/viewer.min.css…

计算机网络 - 路由器查表过程模拟 C++(2024)

1.题目描述 参考计算机网络教材 140 页 4.3 节内容&#xff0c;编程模拟路由器查找路由表的过程&#xff0c;用&#xff08;目的地址 掩码 下一跳&#xff09; 的 IP 路由表以及目的地址作为输入&#xff0c;为目的地址查找路由表&#xff0c;找出正确的下一跳并输出结果。 1.…

[C#]C# OpenVINO部署yolov8-pose姿态估计模型

【源码地址】 github地址&#xff1a;https://github.com/ultralytics/ultralytics 【算法介绍】 Yolov8-Pose算法是一种基于深度神经网络的目标检测算法&#xff0c;用于对人体姿势进行准确检测。该算法在Yolov8的基础上引入了姿势估计模块&#xff0c;通过联合检测和姿势…

UE5 C++(十三)— 创建Character,添加增强输入

文章目录 创建Character第三人称模板添加增强输入引用在脚本中实现移动、旋转 创建Character第三人称模板 创建MyCharacter C类 添加增强输入引用 在DEMO.Build.cs 脚本中添加增强输入模块 有个容易出错的点&#xff0c;这里的设置一定要正确 然后添加引用到C头文件中 …

面向设计师的11个必备AI工具

在当今快速发展的设计领域&#xff0c;人工智能&#xff08;AI&#xff09;工具已成为不可或缺的创新催化剂。这些工具专门用于提高效率和创造力&#xff0c;从而重新定义传统的设计方法。AI正在彻底改变设计师的工作方式&#xff0c;从自动处理任务到发掘新的创造力机会&#…

HTAP(Hybrid Transactional/Analytical Processing)系统之统一存储的实时之道

文章目录 HTAP与时俱进LASER中的存储关键知识LSM&#xff08;Log-Structured Merge Tree&#xff09;SkipList&#xff08;跳表&#xff09;CDC&#xff08;Changed Data Capture&#xff09;SST&#xff08;Sorted Sequence Table&#xff09; 特性列组&#xff08;Column Gro…

Arthas,你真是Java程序员的大力丸

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

印章管理详解|契约锁帮助提前预防99%的印章风险

传统实体印章不仅存在私刻私盖、盗用乱用、易伪造等安全隐患&#xff0c;此外&#xff0c;线下面签的方式也不便于异地、非工作时间用印&#xff0c;分公司用印常常两地来回跑。组织的印章到底怎么“管”才能保障安全和使用效率&#xff1f; 一、 印章管理风险有哪些&#xff…

系统概要设计说明书

系统概要设计说明书 1.整体架构 2.功能架构 3.技术架构 4.运行环境设计 5.设计目标 6.接口设计 7.性能设计 8.运行设计 9.出错设计 全文档获取进主页

面试算法107:矩阵中的距离

题目 输入一个由0、1组成的矩阵M&#xff0c;请输出一个大小相同的矩阵D&#xff0c;矩阵D中的每个格子是矩阵M中对应格子离最近的0的距离。水平或竖直方向相邻的两个格子的距离为1。假设矩阵M中至少有一个0。 例如&#xff0c;图&#xff08;a&#xff09;是一个只包含0、1的…

Docker安装Jenkins,配置Maven和Java

前言 这是一个java的springboot项目&#xff0c;使用maven构建 安装准备 需要将maven和jdk安装在服务器上&#xff0c;Jenkins需要用到&#xff0c;还有创建一个jenkins的目录&#xff0c;安装命令如下&#xff1a; docker run -d -uroot -p 9095:8080 -p 50000:50000 --n…

时间序列数据库选型: influxdb; netdiscover列出docker实例们的ip

influxdb influxdb: 有收费版本、有开源版本 docker run -itd --name influxdb-dev -p 8086:8086 influxdb #influxdb的web客户端(端口8003)被去掉了 #8006是web-service端口docker pull chronograf docker run -d -p 8888:8888 --name chronograf-dev chronografsudo netst…

对比fwrite、mmap、DirectIO 的内存、性能开销,剖析 Page Cache

背景 如上图所示&#xff1a;应用程序写文件有三种形式。 fwrite : 应用程序 -> fwrite(Buffered IO) -> File System -> Page Cache -> Block IO Layer -> Device & Disk etc.mmap : 应用程序 -> mmap -> Page Cache -> Block IO Layer -> De…

【LLM】vLLM部署与int8量化

Acceleration & Quantization vLLM vLLM是一个开源的大型语言模型&#xff08;LLM&#xff09;推理和服务库&#xff0c;它通过一个名为PagedAttention的新型注意力算法来解决传统LLM在生产环境中部署时所遇到的高内存消耗和计算成本的挑战。PagedAttention算法能有效管理…

虾皮商品标题:如何创建有效的虾皮商品标题

虾皮&#xff08;Shopee&#xff09;平台是一个非常受欢迎的电商平台&#xff0c;为卖家提供了一个广阔的销售渠道。在虾皮上&#xff0c;一个有效的商品标题是吸引潜在买家注意力的关键元素之一。一个好的商品标题能够吸引更多的点击和浏览量&#xff0c;从而提高销售机会。下…

什么是API网关代理?

带有API网关的代理服务显着增强了用户体验和性能。特别是对于那些使用需要频繁创建和轮换代理的工具的人来说&#xff0c;使用 API 可以节省大量时间并提高效率。 了解API API&#xff08;即应用程序编程接口&#xff09;充当服务提供商和用户之间的连接网关。通过 API 连接&a…

【PostgreSQL】在DBeaver中实现序列、函数、视图、触发器设计

【PostgreSQL】在DBeaver中实现序列、函数、触发器、视图设计 基本配置一、序列1.1、序列使用1.1.1、设置字段为主键&#xff0c;数据类型默认整型1.1.2、自定义序列&#xff0c;数据类型自定义 1.2、序列延申1.2.1、理论1.2.2、测试1.2.3、小结 二、函数2.1、SQL直接创建2.1.1…

Python教程37:使用turtle画一个戴帽子的皮卡丘

---------------turtle源码集合--------------- Python教程36&#xff1a;海龟画图turtle写春联 Python源码35&#xff1a;海龟画图turtle画中国结 Python源码31&#xff1a;海龟画图turtle画七道彩虹 Python源码30&#xff1a;海龟画图turtle画紫色的小熊 Python源码29&a…

基于宝塔搭建Discuz!论坛

一、安装宝塔 我是在我的虚拟机上安装图的宝塔 虚拟机版本&#xff1a;Ubuntu 18.04 wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh 6dca892c安装完成之后在浏览器输入你的地址 https://你的域名&#xff08;或…