javascript实时获取鼠标坐标值并显示的方法


Posted in Javascript onApril 30, 2015

本文实例讲述了javascript实时获取鼠标坐标值并显示的方法。分享给大家供大家参考。具体实现方法如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实时获取鼠标坐标值并显示</title>
</head>
<body>
<script type="text/javascript">
 var getCoordInDocumentExample = function(){
  var coords = document.getElementById("coords");
  coords.onmousemove = function(e){
   var pointer = getCoordInDocument(e);
   var coord = document.getElementById("coord");
   coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";
  }
 }
 var getCoordInDocument = function(e) {
  e = e || window.event;
  var x = e.pageX || (e.clientX +
   (document.documentElement.scrollLeft
   || document.body.scrollLeft));
  var y= e.pageY || (e.clientY +
   (document.documentElement.scrollTop
   || document.body.scrollTop));
  return {'x':x,'y':y};
 }
 window.onload = function(){
   getCoordInDocumentExample();
 };
</script>
<div id="coords" 
style="width:500px;height:200px;background:#F2F1D7;
border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" 
style="width:500px;border:2px solid #336699;"> </div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
浅析JS运动
Dec 28 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
You might like
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php常量详细解析
2015/10/27 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Add a Table to a Word Document
2007/06/15 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python中黄金分割法实现方法
2015/05/06 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
销售心得体会
2014/01/02 职场文书
2014年情人节活动方案
2014/02/16 职场文书
高考备战决心书
2014/03/11 职场文书
搞笑创意广告语
2014/03/17 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年维稳工作总结
2014/11/18 职场文书
英语辞职信范文
2015/02/28 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技