js鼠标点击添加图标并获取图标的坐标值

文章编号:672 软文发布 2023-10-23 javascript 前端 开发语言

给这个图片添加摄像头图标,并获取图标的坐标值,也就是图标的css样式是positon:absolute,获取left和top的值。

图片1

思路是这样的,获取这里的长度, 

图片2

 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. 完整代码如下



	
		
		
		
	
	
		


本文地址: http://www.wangzhanbaike.cn/article/4d76c10791f206fb1954.html
百度安全社区 - 安全技术_安全产品论坛_安全资讯

百度安全社区旨在打造安全行业技术型社区,沉淀最有价值的安全行业资料,帮助企业、个人开发者获取最新安全资讯,学习最前沿的安全技术,了解最酷的安全产品。

百度页游中心

百度页游中心,为玩家提供优质的精品网络游戏,致力于提供优质的用户服务,成为深受玩家喜爱的游戏平台

虎扑社区-虎扑网

虎扑是以体育赛事和男性兴趣生活为主的社区网站。专注于NBA赛程、NBA录像、NBA直播、NBA资讯、球员交易、足球、英超、电竞、LPL等全部篮球足球电竞赛事,并提供虎扑步行街社区服务。

Free  Textures from TextureKing

Freehighresolution,highqualitytexturesforpersonalandcommercialusefromTextureKing.

响应式、自适应、液态和静态网页设计DEMO

搞不懂响应式网页设计是什么?和自适应网页有什么区别,请看这个页面的演示吧!

Plus X Creative Partner

PluseXperienceforyourBrand.BrandExperienceMarketing&DesignPartner

zhongguose - 传统颜色

提供各种中国的传统颜色的名称,CMYK值,RGB值,16进制表示。

Blog & Freebies – Icojam

该站点未添加描述description...

动次 by KAWO - 三步搞定视频转GIF

动次是科握旗下一款在线视频转GIF免费工具。它是为新媒体运营定制的动图制作软件,提供三种GIF尺寸选择,分别对应微信公众号贴图最佳尺寸、微博配图最佳大小和微信表情包制作。动次支持手机浏览器制作视频动图,生成适合微信、微博发布的GIF图片大小。您也可以用小视频制作表情包,并直接将GIF导出保存在手机。