JavaScript实时获取鼠标坐标与像素位置示例

作者:半夏

时间:2026-10-29

浏览:288

本文提供一段JavaScript代码,用于实时获取并显示鼠标在页面中的坐标位置。通过监听onmousemove事件,无需额外系统资源即可在指定区域动态展示鼠标像素点坐标,适用于前端交互开发测试。

文章目录

JS实时获取鼠标坐标示例

这是一个展示如何通过JavaScript获取鼠标坐标及像素位置的典型示例。在页面运行后,只需随意移动鼠标,即可实时显示当前鼠标的坐标点,且该过程不会占用额外的系统资源。


HTML结构代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript获取鼠标坐标</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } </style>  </head> <body> <div id="mjs" class="tip">源码爱好者</div> <div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div> </body> </html> 

代码运行注意事项

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章