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 相关文章推荐
第一次接触JS require.js模块化工具
Apr 17 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
js实现三角形粒子运动
Sep 22 Javascript
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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
jQuery插件实现图片轮播效果
2020/10/19 jQuery
jquery插件懒加载的示例
2020/10/24 jQuery
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python操作列表的函数使用代码详解
2017/12/28 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
数据库方面面试题
2012/04/22 面试题
英文导游欢迎词
2014/01/11 职场文书
益达广告词
2014/03/14 职场文书
个人租房协议书
2014/04/09 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js