在页面中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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JS解析XML实例分析
Jan 30 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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类与对象中的private访问控制的疑问
2012/11/01 PHP
测试php函数的方法
2013/11/13 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python游戏地图最短路径求解
2019/01/16 Python
python pillow模块使用方法详解
2019/08/30 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
加拿大留学自荐信
2014/01/28 职场文书
同事打架检讨书
2014/02/04 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
单位承诺书格式
2014/05/21 职场文书
学生上课说话检讨书
2014/10/25 职场文书
行为规范主题班会
2015/08/13 职场文书
课改心得体会范文
2016/01/25 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
nginx配置虚拟主机的详细步骤
2021/07/21 Servers