脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Js和JQuery获取鼠标指针坐标

Js和JQuery获取鼠标指针坐标的实现代码分享

 更新时间：2015年05月25日 12:10:18   投稿：junjie  
这篇文章主要介绍了Js和JQuery获取鼠标指针坐标的实现代码分享,本文直接给出实现的代码,需要的朋友可以参考下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>jquery 获取鼠标指针的坐标</title>
<script>
//普通js函数
function test(event) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 alert("x="+x+"; y="+y);
 }
//jquery函数
$(function(){
 $("#t").mouseover(
 function(event){
  event = event || window.event; 
  var x = event.offsetX || event.originalEvent.layerX;
  var y = event.offsetY || event.originalEvent.layerY;
  alert("x:"+x+"; y:"+y);
 }
 );
 });
</script>

</head>

<body>
<div id="t" style="float:left;background-color: green;width: 300px;height: 60px;">测试鼠标位置（jquery函数处理）</div>
<div id="s" onmouseover="test(event)" style="float:left;background-color: red;width: 300px;height: 60px;margin-left:10px;">测试鼠标位置（普通js函数处理）</div>

</body>
</html>
您可能感兴趣的文章:

相关文章

  • js技巧之十几行的代码实现vue.watch代码

    js技巧之十几行的代码实现vue.watch代码

    相信很多的用vue的人都知道vue双向绑定的原理建立在，给属性绑定了getter和setter，在属性被改变的同时触发视图的再渲染。而本期也是借助这两个内置方法实现vue内的watch
    2018-06-06
  • Sortable.js功能强大的JavaScript 拖拽库示例详解

    Sortable.js功能强大的JavaScript 拖拽库示例详解

    SortableJS 是一个强大、灵活且易于使用的 JavaScript 库,适用于各种类型的拖放排序需求,这篇文章主要介绍了Sortable.js功能强大的JavaScript 拖拽库示例详解,需要的朋友可以参考下
    2025-01-01
  • 使用jscript实现二进制读写脚本代码

    使用jscript实现二进制读写脚本代码

    Reading And Writing Binary Files Using JScript正如我刚才推什么我能做的JScript中，我想出了对问题的二进制文件。以下级的解决，这为小到中等大小的文件。我的部分包括这个职位在这里，因为我即将付诸表决，在一个职位约发送带有附件的电邮通过JScript和它会使用这个二进制文件码来读取，在二进制附件档案。
    2008-06-06
  • Js实现粘贴上传图片的原理及示例

    Js实现粘贴上传图片的原理及示例

    这篇文章主要介绍了Js实现粘贴上传图片的原理及示例，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-12-12
  • Javascript模块导入导出详解

    Javascript模块导入导出详解

    这篇文章主要介绍了Javascript模块导入导出详解的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript中Function与Object的关系

    JavaScript中Function与Object的关系

    本文主要介绍了JavaScript中Function与Object的关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JavaScript构造函数举例详解

    JavaScript构造函数举例详解

    Javascript构造函数是非常强大的,它可能也是Javascript能被充分利用的特点之一,文中通过实例代码介绍的非常详细,这篇文章主要给大家介绍了关于JavaScript构造函数的相关资料,需要的朋友可以参考下
    2023-04-04
  • javascript弹出一个层并增加一个覆盖层

    javascript弹出一个层并增加一个覆盖层

    弹出一个层的js代码，比较不错
    2008-10-10
  • JavaScript实现简单版的留言发布与删除

    JavaScript实现简单版的留言发布与删除

    这篇文章主要介绍了如何通过JavaScript实现简单的留言板功能：留言的发布与删除。文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
    2022-03-03
  • js判断主流浏览器类型和版本号的简单实现代码

    js判断主流浏览器类型和版本号的简单实现代码

    下面小编就为大家带来一篇js判断主流浏览器类型和版本号的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论