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 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
json数据处理及数据绑定
Jan 25 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
vue.js路由跳转详解
Aug 28 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JavaScript简介
2015/02/15 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
学习vue.js计算属性
2016/12/03 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
用python绘制樱花树
2020/10/09 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
人力资源经理的岗位职责范本
2014/02/28 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
培养联系人考察意见
2015/06/01 职场文书
简短清晨问候语
2015/11/10 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技