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

js实现点击图片,使图片跟随鼠标移动(把注释打开是图片随机位置)

代码:

<!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>

效果图:

http://www.lryc.cn/news/473000.html

相关文章:

  • MacOS的powermetrics命令查看macbook笔记本的耗能情况,附带查看ANE的工作情况
  • 字符串函数
  • Java数组的地址和元素访问 C语言空指针与野指针
  • 如何在Linux系统中使用SSH进行安全连接
  • Pandas 数据可视化指南:从散点图到面积图的全面展示
  • Flink + Kafka 实现通用流式数据处理详解
  • Docker常用命令汇总
  • 【Java笔记】0-为什么学习Java
  • 海外云手机是什么?对外贸电商有什么帮助?
  • 【找到了】有人知道怎么在本地用记事本方式打开Linux文本文件吗?
  • docker 安装postgresql
  • 2004至2023中国分省统计面板数据-最新出炉_附下载链接
  • 【算法】排序算法总结
  • 双11来了,云计算优惠大集合
  • 13. MapReduce自定义OutputFormat
  • Javase——正则表达式
  • 云原生文件系统之JuiceFS
  • C++:输入和输出
  • vue的路由的两种模式 hash与history 详细讲解
  • 【Linux操作系统】进程间通信之匿名管道与命名管道
  • 慢sql优化和Explain解析
  • ALIGN_ Tuning Multi-mode Token-level Prompt Alignment across Modalities
  • 【Java SE】代码注释
  • 如何在算家云搭建Llama3-Factory(智能对话)
  • 操作数据表
  • C# 实现进程间通信的几种方式(完善)
  • MySQL Workbench Data Import Wizard:list index out of range
  • 微信支付宝小程序SEO优化的四大策略
  • AutoDIR: Automatic All-in-One Image Restoration with Latent Diffusion论文阅读笔记
  • SQLite 数据库设计最佳实践