js与jquery中获取当前鼠标的x、y坐标位置的代码
更新时间：2011年05月23日 21:44:56 作者：
jquery中获取当前鼠标的x、y位置位置的代码，需要的朋友可以参考下。
复制代码 代码如下:
<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>
相关文章
使用CDN和AJAX加速WordPress中jQuery的加载
这篇文章主要介绍了使用CDN和AJAX加速WordPress中jQuery的加载的方法,注意一下WordPress中以及CDN的Google连接在内地的网络问题,需要的朋友可以参考下2015-12-12
本文汇总介绍了24款本年度热门实用的jQuery插件，使用得当的话，可以大大降低项目的开发难度，这里推荐给大家。2014-12-12
两种方法解决javascript url post 特殊字符转义 + & #
本文主要介绍javascript使用url传值的时候数据丢失的问题，希望对大家有所帮助。2016-04-04
这篇文章主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery实现的购物车物品数量加减功能,涉及jQuery针对鼠标事件的响应及页面元素动态操作相关技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了jQuery实现伪分页的方法,结合实例形式分析了jQuery实现伪分页的具体步骤与相关实现代码,需要的朋友可以参考下2016-02-02
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
今天小编就为大家分享一篇关于Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解以及数组中查询某值是否存在，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了jquery+html仿翻页相册功能，前端实现的相册模仿功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
需要做的只是引入其脚本，在HTML标签上赋一个“data-clipboard-target”属性然后写一小段JavaScript片段。为了演示假定有一个货币转换应用，在一个文本框中输入数值时同时将兑换结果显示在另一个文本框中，当点击文本框时，会触发事件将其复制到剪贴板然后显示一条消息。2016-04-04
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论