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


Posted in Javascript onMay 25, 2015
<!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>
Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
Javascript实现飞动广告效果的方法
May 25 #Javascript
javascript自定义右键弹出菜单实现方法
May 25 #Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 #Javascript
JavaScript实现仿网易通行证表单验证
May 25 #Javascript
js+cookies实现悬浮购物车的方法
May 25 #Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
You might like
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php支付宝APP支付功能
2020/07/29 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
java字符串格式化输出实例讲解
2021/01/06 Python
python定义具名元组实例操作
2021/02/28 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
投标承诺书范本
2014/03/27 职场文书
小学教师评语大全
2014/04/23 职场文书
出国留学计划书
2014/04/27 职场文书
廉洁校园实施方案
2014/05/25 职场文书
幸福家庭标语
2014/06/27 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
道士塔读书笔记
2015/06/30 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
table不让td文字溢出操作方法
2022/12/24 HTML / CSS