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 表格隔行颜色
Dec 02 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
简单实现JS计算器功能
Dec 21 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
js中return false(阻止)的用法
2013/08/14 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python构建XML树结构的方法示例
2017/06/30 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
什么时候用assert
2015/05/08 面试题
生产厂长岗位职责
2014/02/21 职场文书
大学生创业项目方案
2014/03/08 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年药店工作总结
2014/11/20 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
大学生见习总结报告
2015/06/24 职场文书
实习感想范文
2015/08/10 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
python 实现定时任务的四种方式
2021/04/01 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS