|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-2-12 21:53 编辑
JS可获得鼠标所在处的 xy 坐标值,以px做单位:
event.clientX → x坐标值 event.clentY → y坐标值
上述xy值,针对的是屏幕环境。那么,如果要获得某元素上鼠标所在处的水平像素值,即鼠标指针离元素的左边边缘有多少个像素,我们只需获得元素在屏幕上的左边值就可以了:event.clientX 减去元素 left相对屏幕的像素值。
恰好,JS里有这个对应值:offsetLeft,它代表的正式元素的left边缘所在的相对于屏幕的位置像素值。
如此,event.clientX - offsetLeft 就是鼠标指针离元素边缘的距离的像素值。现在举一个实例,我们设定一个有id的div,鼠标在其上移动是,该div显示的文本正式鼠标指针距离div左边边缘的像素距离——
代码:
<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>
效果演示:
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|