js与jquery中获取当前鼠标的x、y坐标位置的代码


Posted in Javascript onMay 23, 2011
<div id="testDiv">放在我上面</div> 
<script type="text/javascript"> 
$('#testDiv').mousemove(function(e) { 
var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
$(this).text(xx + '---' + yy); 
}); 
</script>

javascript获取鼠标当前位置坐标
鼠标滑动显示鼠标的当前位置坐标,主要是onmousemove函数。
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>javascript获得鼠标位置</title> 
</head> 
<body> 
<script> 
function mouseMove(ev) 
{ 
Ev= ev || window.event; 
var mousePos = mouseCoords(ev); 
document.getElementById("xxx").value = mousePos.x; 
document.getElementById("yyy").value = mousePos.y; 
} 
function mouseCoords(ev) 
{ 
if(ev.pageX || ev.pageY){ 
return {x:ev.pageX, y:ev.pageY}; 
} 
return{ 
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
y:ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 
} 
document.onmousemove = mouseMove; 
</script> 
鼠标X轴: 
<input id=xxx type=text> 
鼠标Y轴: 
<input id=yyy type=text> 
</body>
Javascript 相关文章推荐
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jquery map方法使用示例
Apr 23 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
微信小程序实现留言板功能
Nov 02 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 #Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 #Javascript
JQuery里选择超链接的实现代码
May 22 #Javascript
改善用户体验的五款jQuery插件分享
May 22 #Javascript
JS 进度条效果实现代码整理
May 21 #Javascript
jquery 使用点滴函数代码
May 20 #Javascript
JQuery对checkbox操作 (循环获取)
May 20 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php中去除所有js,html,css代码
2010/10/12 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
web前端开发也需要日志
2010/12/09 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
kali中python版本的切换方法
2019/07/11 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
Java基础类库面试题
2013/09/04 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
自我评价正确写法范文
2013/12/10 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
个人简历求职信范文
2015/03/20 职场文书
领导视察通讯稿
2015/07/18 职场文书
青年文明号创建口号大全
2015/12/25 职场文书