html5获取鼠标点击盒子内的坐标

最新推荐文章于 2024-03-05 11:29:23 发布
原创 最新推荐文章于 2024-03-05 11:29:23 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #js #javascript #html5

本文介绍如何使用HTML5，结合CSS和JavaScript，获取鼠标在特定盒子内点击时的坐标。通过计算鼠标点击的坐标减去盒子相对于浏览器的位置，可以得到在盒子内的精确位置。

html代码：

<div id="box"></div>

css代码：

#box{
   
   
				width: 300px;
				height: 300px;
最低0.47元/天 解锁文章
获取鼠标在盒子中的坐标位置
178技术
01-10 1361
offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。相关属性如下表所示。
元素偏移量 offset —— 获取鼠标在盒子内的坐标
赚钱养自个儿的博客
05-02 713
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  在盒子内点击，得到鼠标距离盒子左右的距离。 思路 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果...
原生JS，webAPI，案例：计算鼠标在盒子内的坐标
原生JS，webAPI，案例
07-18 329
<style> .box { width: 300px; height: 300px; background-color:skyblue; margin: 200px; } </style> <body> <...
获取鼠标在盒子中的坐标
qq_45387575的博客
03-03 956
1、在盒子内点击，想要得到鼠标距离盒子左右的距离 想到鼠标事件，但是 并不是对于盒子而言的 2、首先得到鼠标在页面中的坐标（pageX、pageY） 3、其次得到盒子在页面中的距离 4、距离一减，就能得到相对于盒子的距离 ...
获取鼠标在盒子内的坐标
weixin_70024734的博客
03-13 163
1.e.pagex:鼠标在页面X轴的距离2.e.pagey:鼠标在页面y轴的距离box.offsetleft:盒子在左页面的距离offsetWidth:盒子自身的宽度offsetHeight:盒子自身的高度。
实现简单的广告倒计时
qq_48930299的博客
04-09 248
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
PC端网页特效—元素偏移量 offset 系列（获取鼠标在盒子内部的坐标）、元素可视区 client 系列、元素滚动 scroll 系列（ 页面被卷去的头部、仿淘宝固定右侧侧边栏）
m0_59030524的博客
03-09 391
Tip：在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。 目标： 能够说出常见offset系列属性的作用 能够说出常见client系列属性的作用 能够说出常见scroll系列属性的作用 能够封装简单动画函数 能够写出网页轮播图案例 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置.
JavaScript 获取鼠标在盒子里的坐标
火星基地
10-26 796
实现思路： 在盒子内点击，想要得到鼠标距离盒子左右的距离 首先得到鼠标在页面中的坐标e.pageX,e.page 其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动mousemove 效果： 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta ch
模仿京东输入内容案例
Jessicawh的博客
08-24 523
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
案例：获取鼠标在盒子内的坐标
icemwj的博客
09-23 1088
案例：获取鼠标在盒子内的坐标 需求： 我们在盒子内移动鼠标，想要得到鼠标距离盒子左右的距离。 案例分析: ① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 ② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）。 ③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)。 ④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标。 ⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove。 代码： <!
H5学习之6 获取鼠标坐标值并且显示其值
qq_29469941的博客
07-24 1931
html> lang="en"> charset="UTF-8"> type="text/css"> body { font-size: 70%; /*设置字的大小*/ font-family: verdana, helvetica, arial, sans-serif; /*
HTML5获取当前的经纬度坐标
weixin_33842328的博客
07-21 654
使用IE10可以查看出结果；chrome和ff都没有正确显示； &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jingweidu&lt;/title&gt; &lt;sc
HTML5获取坐标
weixin_46415443的博客
04-17 391
<script> var options = {enableHighAccuracy: true, timeout: 5000, maximumAge: 0}; function success(pos) { var crd = pos.coords; document.getElementById("id_longitude").parentNode.append('自动获取当前设备经度坐标：'+(crd.longitude))
怎样获取鼠标在盒子中的位置？
最新发布
zy1992As的博客
03-05 206
第30行代码通过鼠标指针移动事的对象获取到鼠标指针在页面中的坐标。上表中给出了ofset系列的属性及说明，在获取元素的位置和大小时，返回的是数值，没有单位，获取到的元素高度和宽度包括padding、边框和内容区域的宽度。从上图中可以看出，通过鼠标指针在body中横纵坐标分别减去盒子距离左边框的偏移量和盒子距离上边的偏移量，可以得到鼠标指针在盒子内部的横纵坐标。从上图中可以看出，通过鼠标指针在body中横纵坐标分别减去盒子距离左边框的偏移量和盒子距离上边的偏移量，可以得到鼠标指针在盒子内部的横纵坐标。
HTML5实时获取鼠标位置,javascript实时获取鼠标坐标值并显示的方法
weixin_35620837的博客
06-04 935
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">JS实时获取鼠标坐标值并显示var getCoordInDocumentExample = function(){var coords = document.getElementById("coords");coords.onmousemove = function...
html5 area 获取坐标,HTML 5
weixin_36444911的博客
05-30 252
属性属性描述45alt定义此区域的替换文本。如果 href 存在，则该属性是必需的。仅在 href 属性存在时使用。45coords定义可点击区域的坐标。45href定义此区域的目标 URL。45hreflang规定目标 URL 的基准语言。仅在 href 属性存在时使用。45nohref不赞成。从图像映射排除一个区域。4media规定目标 URL 的媒介类型。默认值：all。仅在 href 属性...
html如何找坐标,html5
weixin_34380880的博客
05-30 361
使用html5的geolocation方法获取坐标信息，通过百度api的地址解析服务获取坐标对应的地理位置信息视图部分代码点击这个按钮，获得您的位置：试一下var x=document.getElementById("demo");function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPo...
HTML--js获取鼠标点击坐标
anxin591025的专栏
08-12 3539
function getPosition(ev) {             ev = ev || window.event;             var point = { x: 0, y: 0 };             if (ev.pageX || ev.pageY) {                 point.x = ev.pageX;                
鼠标移动触发坐标点显示功能
例如，在JavaScript中，可以通过事件对象的`pageX`和`pageY`属性来获取鼠标相对于整个文档的坐标。 ### 坐标显示 捕获到坐标后，下一步是将这些坐标显示在用户界面上。这通常涉及到DOM操作，即将坐标值动态地添加...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Elio_21

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值