在页面中js获取光标/鼠标的坐标及光标的像素坐标


Posted in Javascript onNovember 11, 2013

近期为网站开发页面统计,以前虽然也开发过,但是功能不是很全,所以这次把一些好功能给用上。

例如这次的,页面JS光标/鼠标坐标,你也许问着有什么用,百度统计中有个热点统计图,这下清楚明白了吧。

好了,上肉:
功能:获取光标的像素坐标

<html> 
<head> 
<script type="text/javascript"> 
function showPosition(e){ 
var x,y; 
var e = e||window.event; document.getElementById("x").value = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; 
document.getElementById("y").value = e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
} 
</script> 
</head> 
<body> 
<div onmousemove="showPosition(event);" style="height:100%; width:100%;"> 
x:<input id="x" type="text" value="" /> 
y:<input id="y" type="text" value="" /> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
js中关于一个分号的崩溃示例
Nov 11 #Javascript
javascript中怎么做对象的类型判断
Nov 11 #Javascript
jquery隐藏标签和显示标签的实例
Nov 11 #Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 #Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 #Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 #Javascript
javascript内存管理详细解析
Nov 11 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python try 异常处理(史上最全)
2019/03/07 Python
python增加图像对比度的方法
2019/07/12 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
Python for i in range ()用法详解
2020/09/18 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
资料员岗位职责
2015/02/10 职场文书
公司员工管理制度
2015/08/04 职场文书