JS：获取元素鼠标所在处的像素值
本帖最后由 马黑黑 于 2022-2-12 21:53 编辑 <br /><br />JS可获得鼠标所在处的 xy 坐标值，以px做单位：<br><br>event.clientX → x坐标值<br>event.clentY → y坐标值<br><br>上述xy值，针对的是屏幕环境。那么，如果要获得某元素上鼠标所在处的水平像素值，即鼠标指针离元素的左边边缘有多少个像素，我们只需获得元素在屏幕上的左边值就可以了：event.clientX 减去元素 left相对屏幕的像素值。<br><br>恰好，JS里有这个对应值：offsetLeft，它代表的正式元素的left边缘所在的相对于屏幕的位置像素值。<br><br>如此，event.clientX - offsetLeft 就是鼠标指针离元素边缘的距离的像素值。现在举一个实例，我们设定一个有id的div，鼠标在其上移动是，该div显示的文本正式鼠标指针距离div左边边缘的像素距离——<br><br>代码：<br><br><div id="myDiv" style="position:relative;width:200px;height:30px;line-height:30px;text-align:center;background:#000;color:#eee;cursor:pointer;"></div><br><br><script language="javascript"><br><br>document.getElementById('myDiv').onmousemove = function() {<br> var x = event.clientX - this.offsetLeft;<br> this.innerHTML = x + "px";<br>}<br><br></script><br><br><br>效果演示：<br><br><br><br><br><div id="myDiv" style="position:relative;width:200px;height:30px;line-height:30px;text-align:center;background:#000;color:#eee;cursor:pointer;"></div>
<script language="javascript">
document.getElementById('myDiv').onmousemove = function() {
var x = event.clientX - this.offsetLeft;
this.innerHTML = x + "px";
}
</script> 总论坛里，要给元素设定 position，所获得的数据才正确 这个帖子，黑黑是要给那个播放器定义鼠标可以操控吧{:4_187:} offset，这个命令和cad的一样的呢。
拖动进度条，感觉挺难的事，没想到代码倒是不太多。JS真强大{:4_187:} 红影 发表于 2022-2-13 11:09
offset，这个命令和cad的一样的呢。
拖动进度条，感觉挺难的事，没想到代码倒是不太多。JS真强大
调节播放进度，就是知道鼠标指针所在位置以及该位置相对于当前元素而言的像素长度，这个要成为已知数，播放器的进度调节就可以有计算依据 红影 发表于 2022-2-13 11:09
offset，这个命令和cad的一样的呢。
拖动进度条，感觉挺难的事，没想到代码倒是不太多。JS真强大
至于 offset，是偏移的意思，这在很多软件都会用到 红影 发表于 2022-2-13 11:07
这个帖子，黑黑是要给那个播放器定义鼠标可以操控吧
嗯，你看出名堂来了，不错的 马黑黑 发表于 2022-2-13 19:43
调节播放进度，就是知道鼠标指针所在位置以及该位置相对于当前元素而言的像素长度，这个要成为已知数，播 ...
觉得这个挺神奇的，只要点到进度条上，计算机就能判断鼠标的位置并和百分比对应起来，非常神奇。 马黑黑 发表于 2022-2-13 19:44
至于 offset，是偏移的意思，这在很多软件都会用到
看到熟悉的名称，特别激动{:4_173:} 马黑黑 发表于 2022-2-13 19:44
嗯，你看出名堂来了，不错的
应该谢谢黑黑，一点点的，讲解了这么多知识{:4_187:} 红影 发表于 2022-2-13 20:18
应该谢谢黑黑，一点点的，讲解了这么多知识
不客气的，共享一些东东挺好 红影 发表于 2022-2-13 20:17
看到熟悉的名称，特别激动
嗯，我知道的，有点像他乡遇故知{:4_170:} 红影 发表于 2022-2-13 20:17
觉得这个挺神奇的，只要点到进度条上，计算机就能判断鼠标的位置并和百分比对应起来，非常神奇。
这个我们通过数学的方式给它发了计算和执行的指令 马黑黑 发表于 2022-2-13 20:22
不客气的，共享一些东东挺好
跟在黑黑后面，看明白了很多东西，虽然现在还无法运用。 马黑黑 发表于 2022-2-13 20:22
嗯，我知道的，有点像他乡遇故知
是啊，那么多陌生面孔，忽然看到一个熟悉的，特别开心呢{:4_173:} 马黑黑 发表于 2022-2-13 20:23
这个我们通过数学的方式给它发了计算和执行的指令
又到一楼去移动鼠标，看着px的变化，特别有趣。 红影 发表于 2022-2-13 20:34
又到一楼去移动鼠标，看着px的变化，特别有趣。
手机上的呈现结果不同，估计原因与手机没有onmousemove有关 红影 发表于 2022-2-13 20:33
是啊，那么多陌生面孔，忽然看到一个熟悉的，特别开心呢
开心就好 红影 发表于 2022-2-13 20:33
跟在黑黑后面，看明白了很多东西，虽然现在还无法运用。
时机到了就会用上的 马黑黑 发表于 2022-2-13 20:45
手机上的呈现结果不同，估计原因与手机没有onmousemove有关
不知道呢，我很少手机玩论坛。