|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
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 |
赞一个! |
查看全部评分
|
发表于 2022-2-12 21:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
