js鼠标点击添加图标并获取图标的坐标值
给这个图片添加摄像头图标，并获取图标的坐标值，也就是图标的css样式是positon:absolute,获取left和top的值。
思路是这样的，获取这里的长度，
1.鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标
let x = e.clientX;
let y = e.clientY;2.图片距浏览器顶部的距离
let imgTop = $('.imageBox img').offset().top;
let imgLeft = $('.imageBox img').offset().left;3.就能获取到图片2中箭头的距离，即鼠标点击的位置距背景图顶部的距离
let cursorTop = y - imgTop;
let cursorLeft = x - imgLeft;4.计算得出图标的left和top值，这里是%。
let width = $('.imageBox img').width();
let height = $('.imageBox img').height();
let left = (cursorLeft/width*100).toFixed(2)
let top = (cursorTop/height*100).toFixed(2)5.效果如下图，但是鼠标点击处是图标的左上角，感觉好像是差一点
6.应该让鼠标点击处是图标的中心，就需要获取图标中心的坐标，然后 减去图片2中箭头的距离。
//设置添加的小图标的center为中心点
let pointLeft = $('.imageBox .block').width()*0.5;
let pointTop = $('.imageBox .block').height()*0.5;//鼠标点击无差距
let xData = cursorLeft - pointLeft;
let yData = cursorTop - pointTop;
7. 完整代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.imageBox{width: 800px;position: relative;overflow: hidden;margin: 5% 2%;}.imageBox img{width: 100%;height: 100%;}.imageBox .block{width: 3%;height: 4%;background: url(camera.png) 0 0 no-repeat;background-size: 100% 100%;position: absolute;}</style></head><body><div class="page"><div class="imageBox"><img src="https://img0.baidu.com/it/u=3593454291,2854711423&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" ><div class="block"></div></div></div><script src="jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$('.imageBox').click(function(e){//鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标let x = e.clientX;let y = e.clientY;//图片的宽高let width = $('.imageBox img').width();let height = $('.imageBox img').height();//图片距浏览器顶部的距离let imgTop = $('.imageBox img').offset().top;let imgLeft = $('.imageBox img').offset().left;//鼠标点击的位置距背景图顶部的距离let cursorTop = y - imgTop;let cursorLeft = x - imgLeft;//设置添加的小图标的center为中心点let pointLeft = $('.imageBox .block').width()*0.5;let pointTop = $('.imageBox .block').height()*0.5;//鼠标点击无差距let xData = cursorLeft - pointLeft;let yData = cursorTop - pointTop;let left = (xData/width*100).toFixed(2)let top = (yData/height*100).toFixed(2)console.log(x);console.log(y);// let html = `<div class="block" style="top: ${top}%;left: ${left}%;"></div>`// $('.imageBox').append(html);$('.imageBox .block').css({'top':top+'%'})$('.imageBox .block').css({'left':left+'%'})})</script></body>
</html>
相关文章：
js鼠标点击添加图标并获取图标的坐标值
给这个图片添加摄像头图标，并获取图标的坐标值，也就是图标的css样式是positon:absolute,获取left和top的值。 图片1 思路是这样的，获取这里的长度， 图片2 1.鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标 …...
How to add a jar to a project in eclipse?
Project -> Properties -> Java Build Path -> Libraries -> Add External JARs...
动手实现H5仿原生app前进后退切换效果
动手实现H5仿原生app前进后退切换效果 前言 最近在优化H5页面，我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时，当触发页面路由切换会与原生app看上去有点格格不入，因为H5页面<router-view>切换路由时是直接替换了…...
【标准化封装 SOT系列 】 D SOT-323 SOT-363
〇、关键词 SC70 。 一、D部分 SOT-323 SOT-363 这个应该叫SC-70可能更合适，典型特征 pin 间距 0.65mm ; body size 2.0mm1.25mm 这一节很像SOT-23，即A部分，因此也是最容易被混淆的。 二、SC70-3 / -5/ -6 鉴于此，封装最好给…...
软件测试肖sir__python之ui自动化实战和讲解03
python之ui自动化实战和讲解...
Kafka序列化反序列化解析、kafka schema
Kafka序列化反序列化解析、kafka schema。 kafka有自己的rpc协议，即nio bytebuf中的数据格式，详见之前的kafka相关介绍的文章。这里我们来看一下大家常用，有时又疑惑的序列化反序列化，对应rpc协议中的records，kafka叫Serdes，实际上也是字面上的意思serialize and deseri…...
谷歌浏览器中如何审查隐藏的元素
谷歌浏览器中如何审查隐藏的元素 方法1： 打开控制台 先鼠标移上先显示出来 快捷键按 CtrlShiftC，只能简单查看宽高，做不到复杂的的样式查询 方法2： 在控制台输入一个以下代码, 并保留光标在控制台闪烁，鼠标移上去显示…...
【vue】使用less报错：显示this.getOptions is not a function
在vue-cli中使用 lang“less” 时报错： Module build failed: TypeError: this.getOptions is not a function at Object.lessLoader 原因：版本过高所致，所用版本为 解决：降低版本：npm install less-loader4.1.0 --s…...
代码随想录第48天 | ● 739. 每日温度 ● 496.下一个更大元素 I
739. 每日温度 /*** param {number[]} temperatures* return {number[]}*/ var dailyTemperatures function(temperatures) {const ntemperatures.lengthconst resArray(n).fill(0)const stack[] // 递增栈：用于存储元素右面第一个比他大的元素下标stack.push(0…...
团购页面.
<!DOCTYPE html> <html><head><title>团购</title><meta http-equiv"content-type" content"text/html; charsetutf-8"/><meta name"apple-mobile-web-app-capable" content"yes"/><lin…...
linux-系统日志/var/log/简介
日志在排查文件的时候至关重要，在Linux上一般跟系统相关的日志默认都会放到/var/log下面。 1、/var/log/boot.log 一般包含系统启动时的日志，包括自启动的服务。 2、/var/log/btmp 记录所有失败登录信息。非文本文件，可以使用last -f /va…...
2022最新版-李宏毅机器学习深度学习课程-P26RNN-2
一、RNN网络结构 与时间有关的反向传播（每次不同） 损失函数 实验其实不容易跑，因为他的损失函数曲线幅度很大 画出来差不多是这个样子。突然一下升高是因为从右到左碰到陡峭的地方梯度一下变大了，所以弹回去了。 原作者在训练时…...
docker 配置mongoDB
## 拉取镜像 docker pull mongo## 设置默认账号密码 test:test 默认数据 test docker run -d --name mongo-container -e MONGO_INITDB_ROOT_USERNAMEtest -e MONGO_INITDB_ROOT_PASSWORDtest -e MONGO_INITDB_DATABASEtest -p 27017:27017 mongo...
基于PHP的宠物爱好者交流平台管理系统设计与实现(源码+lw+部署文档+讲解等)
文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序（小蔡coding） 代码参考数据库参考源码获取 前言 💗博主介绍：✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…...
盘点数据采集中14种常见的反爬策略
引言 随着互联网的飞速发展, 爬虫技术不断演进, 为数据获取和信息处理提供了强大支持。然而, 滥用爬虫和恶意爬取数据的行为日益增多, 引发了反爬虫技术的兴起。在这场看似永无止境的 技术较量 中, 爬虫与反爬虫技术相互博弈、角力。本文将简单过下目前已知的几种反爬策略, 旨…...
直播预告：防御升级-SMC2精准对抗账号劫持和漏洞威胁
当邮箱账号出现疑似被盗风险和遭受外部攻击时，企业管理员需要尽快发现或排除潜在威胁，并采取处置措施，阻止威胁扩大。 那么面对账号失陷风险，企业管理员如何做到账号异常行为的精准检测和即时处置？当账号遭受外部攻击时…...
班主任好物 班级查询系统来啦
哈喽各位，作为一名教育博主，今天我要给大家分享一个班主任的好物——班级查询系统！这个系统可真是太方便了呢，那么，这个神秘的班级查询系统到底是什么呢？别急，听我慢慢道来。 班级查询系统&…...
【性能测试】使用JMeter对code论坛进行压力测试
1.项目介绍 项目简介 code 论坛是一个技术交流社区。主要功能有发布帖子，查看帖子，评价帖子，删除帖子，点赞帖子，站内信，个人中心，修改个人信息等。是一个基于 Spring 的前后端分离项目。 项目链…...
Windows 事件日志监控
Windows 事件日志是记录 Microsoft 系统上发生的所有活动的文件，在 Windows 环境中，将记录系统上托管的系统、安全性和应用程序的事件，事件日志提供包含有关事件的详细信息，包括日期、时间、事件 ID、源、事件类型和发起它的用户。…...
pytorch里常用操作（持续更新）
对不起我脑子不太记事儿每次变换都得想想想所以干脆汇总一下算了，当然也有一些不是torch包里面的但是没有关系hhh 官方文档里有一堆不太常用的，这里整理的都是自己比较常用的 张量操作 torch.tensor：从Python列表或NumPy数组创建张量 torc…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...
go 里面的指针
指针 在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙（HarmonyOS5）中集成百度地图，可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API，可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具：下载安装 De…...