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

js实现点击图片，使图片跟随鼠标移动（把注释打开是图片随机位置）

news 2026/3/27 21:16:39

代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>img {width: 200px;position: absolute;}body {transition: 1s;}</style></head><body><img src="https://s21.ax1x.com/2024/04/08/pFLZm6A.png" alt="" /><script>let img = document.querySelector("img");let imgtype = false;img.onclick = function () {imgtype = !imgtype;if (imgtype) {document.onmousemove = function (e) {img.style.top = e.clientY - img.offsetHeight/2+ "px";img.style.left = e.clientX - img.offsetWidth/2 + "px";};} else {document.onmousemove = "";}};// setInterval(()=>{//     img.style.top = Math.floor(Math.random()*500)+'px'//     img.style.left = Math.floor(Math.random()*1000)+'px'// },100)</script></body>
</html>

效果图：

js实现点击图片，使图片跟随鼠标移动（把注释打开是图片随机位置）

代码： <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>&l…...

编程日记 2024/10/31 9:24:43

MacOS的powermetrics命令查看macbook笔记本的耗能情况，附带查看ANE的工作情况

什么是 powermetrics？ powermetrics 是 macOS 系统自带的一个命令行工具，用于收集和分析系统能源消耗数据。通过它，我们可以深入了解 Mac 的硬件性能、软件行为以及能源使用情况，从而优化系统配置，提高电池续航时间。…...

编程日记 2024/10/31 9:21:38

字符串函数

大家好，今天我们来了解几个字符串函数 1.strcpy函数这个函数是一个字符串复制函数，其全称为string copy，它可以将一个源字符数组的内容复制到目标字符数组中，我们需要关注几个问题，首先源字符串必须以＼0…...

编程日记 2024/10/31 9:20:37

1. public static void main(String[] args) {int []arr{1,2,3,4,5};int numarr[0];System.out.println(num);System.out.println(arr[1]);System.out.println(arr);//[I610f87f48//[表示地址 I表示数据类型表示间隔符号（固定格式）//10f87f48表示地址…...

编程日记 2024/10/31 9:19:35

如何在Linux系统中使用SSH进行安全连接

如何在Linux系统中使用SSH进行安全连接 SSH简介安装SSH 在Debian/Ubuntu系统中安装在CentOS/RHEL系统中安装启动SSH服务验证SSH是否安装成功 SSH配置配置监听端口配置登录方式 SSH客户端安装SSH客户端使用SSH客户端 SSH密钥认证生成SSH密钥对复制公钥到远程服务器…...

编程日记 2024/10/31 9:16:32

Pandas 数据可视化指南：从散点图到面积图的全面展示

Pandas 数据可视化指南：从散点图到面积图的全面展示本文介绍了使用 Pandas 进行数据可视化的多种方法，包括散点图、折线图、条形图、直方图、饼图和面积图等，涵盖了常见的图表类型及其实现方式。通过提供详细的代码示例，展示了如…...

编程日记 2024/10/31 9:13:27

Flink + Kafka 实现通用流式数据处理详解

Flink Kafka 实现通用流式数据处理详解在大数据时代，实时数据处理和分析成为企业快速响应市场变化、提高业务效率和优化决策的关键技术。Apache Flink和Apache Kafka作为两个重要的开源项目，在数据流处理领域具有广泛的应用。本文将深入探讨Flink和Ka…...

编程日记 2024/10/31 9:09:23

Docker常用命令汇总

一、Docker基础命令启动docker：systemctl start docker关闭docker：systemctl stop docker重启docker：systemctl restart dockerdocker设置随服务启动而自启动：systemctl enable docker查看docker 运行状态：systemctl…...

编程日记 2024/10/31 9:08:22

【Java笔记】0-为什么学习Java

呃，当然是为了找个Java的开发工作当然是由于Java使用的人多和它天生自带的优点了~ 主要优点有以下几点： 简单性 C语法纯净版，没有头文件、指针运算、不用分配内存面向对象重点放在对象与其接口上，接近人的逻辑可移植性 …...

编程日记 2024/10/31 9:07:20

海外云手机是什么？对外贸电商有什么帮助？

在外贸电商领域，流量引流已成为卖家们关注的核心问题。越来越多的卖家开始利用海外云手机，通过TikTok等社交平台吸引流量，以推动商品在海外市场的销售。那么，海外云手机到底是什么？它又能为外贸电商卖家提供哪些支持呢…...

编程日记 2024/10/31 9:03:12

【找到了】有人知道怎么在本地用记事本方式打开Linux文本文件吗？

就类似这种，我输入一个什么命令打开文件，就能在命令窗口上弹出一个编辑器来编辑文件。只记得好像有参数-e啥的。命令行里面如何打开文本编辑器？ （） 在linux命令行terminal上使用gedit直接就可以打开文本文件那么在…...

编程日记 2024/10/31 9:02:05

docker 安装postgresql

前提：准备好postgresql镜像，如：镜像地址/postgres:15.8 使用docker安装posgresql： 1.docker pull 镜像地址/postgres:15.8 2.docker run -d --namepostgres -p 5432:5432 -v postgres-volume:/var/lib/postgresql/data -e PO…...

编程日记 2024/10/31 9:01:03

2004至2023中国分省统计面板数据-最新出炉_附下载链接

中国各省绿色税收相关数据（2007-2022年）概述下载链接-点它👉👉👉：中国分省统计面板数据（2004-2023）-最新出炉.zip 资源介绍绿色税收主要是指以保护环境、合理开发利用自然资源、…...

编程日记 2024/10/31 8:58:00

【算法】排序算法总结

文章目录内排序一、插入排序1.1 直接插入排序1.2 折半插入排序1.3 希尔排序二、选择排序2.1 简单选择排序2.2 堆排序三、交换排序3.1 冒泡排序3.2 快速排序Hoare版挖坑法快速排序前后指针法快速排序的非递归四、归并排序递归版本非递归版本五、基数排序六、计数排序内排序…...

编程日记 2024/10/31 8:55:58

双11来了，云计算优惠大集合

京东云 2C2G强烈推荐连接直达...

编程日记 2024/10/31 8:53:51

13. MapReduce自定义OutputFormat

一. OutputFormat简介 OutputFormat是MapReduce输出的基类，所有MapReduce输出都实现了OutputFormat接口，它接收ReduceTask产生的数据，然后将结果按照指定格式输出。在MapReduce中，如果不指定，默认使用的是TextOutpu…...

编程日记 2024/10/31 8:52:48

Javase——正则表达式

正则表达式的相关使用 public static void main(String[] args) {//校验QQ号 System.out.println("3602222222".matches("[1-9][0-9]{4,}"));// 校验18位身份证号 System.out.println("11050220240830901X".matches("^([0-9]){7,18}…...

编程日记 2024/10/31 8:48:43

云原生文件系统之JuiceFS

JuiceFS 是一个分布式文件系统，专门为云原生环境设计，支持大规模数据存储和处理，特别适用于处理对象存储和大数据应用。JuiceFS 将元数据和数据分离，元数据保存在数据库中，而文件数据则存储在对象存储中，提…...

编程日记 2024/10/31 8:47:41

C++：输入和输出

一 . DEV C的下载和安装二 . 第一个C程序三 . 输出流四 . 初始的数据类型 3.1、整型变量 3.2、双精度浮点数变量 3.3、字符型变量 3.4、字符串变量 3.5、无符号整型变量五、输入流...

编程日记 2024/10/31 8:43:36

vue的路由的两种模式 hash与history 详细讲解

文章目录 1. Hash 模式工作原理优点缺点使用示例 2. History 模式工作原理优点缺点服务器配置示例使用示例总结 Vue Router 是 Vue.js 的官方路由管理器，它支持多种路由模式，其中最常用的两种是 hash 模式和 history 模式。下面我们详细讲解这两种模式的…...

编程日记 2024/10/31 8:38:27

从‘调不出来’到‘一次过流片’：折叠共源共栅放大器设计中那些没人告诉你的‘坑’与调试技巧

从‘调不出来’到‘一次过流片’：折叠共源共栅放大器设计中那些没人告诉你的‘坑’与调试技巧在模拟电路设计的江湖里，折叠共源共栅（Folded Cascode）放大器就像一位身怀绝技却性格古怪的武林高手——性能强悍但极难驯服。许多工…...

编程新知 2026/3/27 20:47:38

实用扩散模型完整指南：100行代码实现高效图像生成

实用扩散模型完整指南：100行代码实现高效图像生成【免费下载链接】Diffusion-Models-pytorch Pytorch implementation of Diffusion Models (https://arxiv.org/pdf/2006.11239.pdf) 项目地址: https://gitcode.com/gh_mirrors/di/Diffusion-Models-pytorch …...

编程新知 2026/3/27 20:39:37

SpringBoot+Vue实战：手把手教你搭建社区居民健康档案管理系统（附完整源码）

SpringBootVue实战：从零构建社区居民健康档案管理系统在数字化转型浪潮下，社区卫生服务正经历着从纸质档案到智能化管理的转变。对于Java开发者而言，这不仅是技术练兵的好机会，更是解决实际社会需求的切入点。本文将带你用Spring…...

编程新知 2026/3/27 20:27:32

OpenClaw环境隔离方案：ollama-QwQ-32B镜像与本地Python虚拟环境整合

OpenClaw环境隔离方案：ollama-QwQ-32B镜像与本地Python虚拟环境整合 1. 为什么需要环境隔离上周我在尝试将OpenClaw接入本地部署的ollama-QwQ-32B模型时，遇到了一个棘手的问题：我的开发环境突然崩溃了。事后排查发现，是OpenCla…...

编程新知 2026/3/27 20:05:06

如何高效配置Unity插件框架：BepInEx完整实战指南

如何高效配置Unity插件框架：BepInEx完整实战指南【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专为Unity游戏设计的插件框架和补丁工具，能够…...

编程新知 2026/3/27 19:14:51