JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容


Posted in Javascript onJune 12, 2017

获取鼠标坐标,并且根据鼠标所在div弹出不同内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head><title>鼠标的距离</title>
<script type="text/javascript">
var mouseX;
var mouseY;
function show(event) {
 var infoDiv = document.getElementById('infoDiv');
 mouseOver(event);
  document.getElementById("a").innerHTML = mouseX+" "+mouseY ;
  infoDiv.style.display = "block";
 //infoDiv.innerHTML = mouseX+" "+mouseY;
  infoDiv.style.left = mouseX + 10 + "px";
  infoDiv.style.top = mouseY + 10 + "px";  
}
function hide() {
  var infoDiv = document.getElementById('infoDiv').style.display = "none";;
}
function mouseOver(obj) {
  e = obj || window.event;
  // 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
  mouseX = e.layerX|| e.offsetX;
  mouseY = e.layerY|| e.offsetY; 
  if(e.target.id == "aaa")
  {
    infoDiv.innerHTML = "aaa";
  }
  else if(e.target.id == "bbb")
  {
    infoDiv.innerHTML = "bbb";
  }
  else if(e.target.id == "ccc")
  {
    infoDiv.innerHTML = "ccc";
  }
  else if(e.target.id == "ddd")
  {
    infoDiv.innerHTML = "ddd";
  }else{
    infoDiv.innerHTML = "eee";
    }
}
</script>
</head>
<body>
<div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; width:300px; position:relative; ">鼠标相对于触发事件元素的位置<strong id="a"></strong>
  <div id="aaa">aaa</div>
  <div id="bbb">bbb</div>
  <div id="ccc">ccc</div>
  <div id="ddd">ddd</div>
 <div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 100px; background-color: #F1F19B;"></div>
</div>
</body>
</html>

以上所述是小编给大家介绍的JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS检测图片大小的实例
Aug 21 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 #Javascript
JS判断一个数是否是水仙花数
Jun 11 #Javascript
在bootstrap中实现轮播图实例代码
Jun 11 #Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 #Javascript
PHP7新特性简述
Jun 11 #Javascript
jquery与js实现全选功能的区别
Jun 11 #jQuery
You might like
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Tornado 多进程实现分析详解
2018/01/12 Python
雅虎笔试题(字符串操作)
2015/03/24 面试题
介绍一下Make? 为什么使用make
2013/12/08 面试题
护士自我鉴定范文
2013/10/06 职场文书
机电专业毕业生求职信
2013/10/27 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
贷款委托书
2014/08/01 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
三八妇女节慰问信
2015/02/14 职场文书
《搭石》教学反思
2016/02/18 职场文书
python实现网络五子棋
2021/04/11 Python
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python