学习啦>学习电脑>电脑硬件知识>键盘鼠标>

js怎么获取鼠标在div中的相对位置

时间: 沈迪豪908 分享

  大家在做网页的时候都可能会用到鼠标在div中的相对位置,那么怎么获取鼠标在div中的相对位置呢?下面由学习啦小编教大家怎么获取鼠标在div中的相对位置吧。

  如何获取鼠标在div中的相对位置

  代码如下:

  <HEAD>

  <TITLE> JS获取DIV相对坐标</TITLE>

  <script type="text/javascript"><!--

学习啦在线学习网   function getX(obj){

  var parObj=obj;

  var left=obj.offsetLeft;

  while(parObj=parObj.offsetParent){

学习啦在线学习网   left+=parObj.offsetLeft;

  }

学习啦在线学习网   return left;

  }

学习啦在线学习网   function getY(obj){

学习啦在线学习网   var parObj=obj;

  var top=obj.offsetTop;

  while(parObj = parObj.offsetParent){

  top+=parObj.offsetTop;

  }

学习啦在线学习网   return top;

  }

学习啦在线学习网   function DisplayCoord(event){

学习啦在线学习网   var top,left,oDiv;

  oDiv=document.getElementById("demo");

学习啦在线学习网   top=getY(oDiv);

学习啦在线学习网   left=getX(oDiv);

  document.getElementById("mp_x").innerHTML = (event.clientX-left+document.documentElement.scrollLeft) -2+"px";

  document.getElementById("mp_y").innerHTML = (event.clientY-top+document.documentElement.scrollTop) -2+"px";

  }

  // --></script>

学习啦在线学习网   </HEAD>

学习啦在线学习网   <BODY style="margin:40px;" mce_style="margin:40px;">

学习啦在线学习网   <div style="background-color:#000000;color:#0011FF;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)">

  我是DIV,经测试,有2PX的误差...

  </div>

学习啦在线学习网   当前鼠标坐标为:

学习啦在线学习网   X:<span id="mp_x"></span>

  Y:<span id="mp_y"></span>

学习啦在线学习网   </body>

  </BODY>

  </HTML>

学习啦在线学习网   如果不对,可以试试将

学习啦在线学习网   document.documentElement.scrollLeft

  替换成

  document.body.scrollLeft

获取鼠标在div中的相对位置相关文章:

1.CSS怎么控制鼠标形状

2.css怎么设置鼠标形状

3.css怎么设置鼠标沙漏形状

4.css怎么改变鼠标样式

5.css怎么设置鼠标手势

js怎么获取鼠标在div中的相对位置

大家在做网页的时候都可能会用到鼠标在div中的相对位置,那么怎么获取鼠标在div中的相对位置呢?下面由学习啦小编教大家怎么获取鼠标在div中的相对位置吧。 如何获取鼠标在div中的相对位置 代码如下: HEAD TITLE JS获取DIV相对坐标/TITLE
推荐度:
点击下载文档文档为doc格式

精选文章

  • 鼠标移时特别慢怎么解决
    鼠标移时特别慢怎么解决

    鼠标的移动速度是决定很多人工作快慢的主要因素之一,如果你的鼠标移时特别慢表反应迟钝不听指挥该怎么解决呢?下面由学习啦小编教大家怎么解决鼠标

  • 鼠标突然没反应怎么解决
    鼠标突然没反应怎么解决

    学习啦在线学习网当我在使用电脑时鼠标突然没反应了怎么办?不知道的话跟着学习啦小编一起来学习鼠标突然没反应了的解决方法吧。 鼠标明明有连接电脑却没有反应是怎

  • 鼠标不会动了怎么解决
    鼠标不会动了怎么解决

    我们平常在使用电脑的时候会遇到鼠标不会动的情况,这时候我们该怎么办呢?不知道的话跟着学习啦小编一起来学习怎么解决鼠标不会动。 鼠标不会动的

  • 怎么判断一个鼠标的好坏
    怎么判断一个鼠标的好坏

    现在的鼠标五花八门,让人眼花缭乱,我们该怎么去判断鼠标好坏呢?下面由学习啦小编教大家怎么去判断一个鼠标的好坏。 判断一个鼠标的好坏的标准 现

1947355