在页面中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中常用编程知识
Apr 08 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 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学习资源和链接.
2006/12/05 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
2014教师个人自我评价范文
2014/09/13 职场文书
党支部承诺书
2015/01/20 职场文书
大学生党员自我评价
2015/03/04 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
同学会演讲稿
2019/04/02 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
JavaScript 原型与原型链详情
2021/11/02 Javascript