鼠标位置修改上一篇js错误有点乱路口师傅

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标位置 路口师傅 修改上一篇js错误 有点乱</title>
​
</head>
<body>
   <!--table-->
    <table>
    <tr>
      <td>X轴:</td><td id="xx"></td>
     </tr>
    <tr>
      <td>Y轴:</td><td id="yy"></td>
    </tr>
  </table>
  <!--div-->
  <div id="div">
        蓝色div
    /*
        内外边距不影响offsetLeft与offsetTop
  */
  </div>
  <div style="clear:both;border:1px solid ">
  </div>
  <div id="div2">
    红色div2
   <pre>
/*float:left;       不影响offsetTop offsetLeft
position:relative;    不影响offsetTop offsetLeft
position:absolute;    不影响offsetTop&offsetLeft
top:500px;
*/
     </pre>
  </div>
  <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3801213fb80e7bec0d1f10ef2f2eb9389a506bf2.jpg" alt="网络资源">
</body>
</html>

HTML

xxxxxxxxxx
 
var oDiv = document.getElementById('div');
        var oDiv2 = document.getElementById('div2');
        var oxx = document.getElementById('xx');
        var oyy = document.getElementById('yy');
    oDiv.onmousemove=function(event){
      /*得到相对于盒子的鼠标位置*/
      oxx.innerHTML = (event.clientX+document.body.scrollLeft)-oDiv.offsetLeft;
      oyy.innerHTML = (event.clientY+document.body.scrollTop)-oDiv.offsetTop;
    }
    oDiv2.onmousemove=function(event){
      /*得到相对于盒子的鼠标位置*/
      oxx.innerHTML = (event.clientX+document.body.scrollLeft)-oDiv2.offsetLeft;
      oyy.innerHTML = (event.clientY+document.body.scrollTop)-oDiv2.offsetTop;
    }
    
    /*
        窗口滚动距离
      document.body.scrollTop;
      document.body.scrollLeft;
      ------------------------------------
        offsetLeft
        offsetTop
        
        普通元素位置
      ----------------------------------
       event.clientX + document.body.scrollLeft
       event.clientY + document.body.scrollTop
       鼠标相对于文档位置（已加入窗口滚动情况）
       ——是相加-》上一张错误
    */

JavaScript

xxxxxxxxxx
 
body{
  padding:20px;
}
table{
  position:fixed;
  right:0px;
  top:50px;
  border:1px solid blue;
}
table tr,td{
  border:1px solid blue;
}
img{
  border:1px solid green;
}
#div{
  width:500px;
  height:100px;
  border:1px solid blue;
  /*
        内外边距不影响offsetLeft与offsetTop
  */
  padding:20px;
  margin:20px;
}
#div2{
  width:500px;
  height:100px;
  border:10px solid red;
  padding:20px;
  margin:20px;
  
   /*
        float:left;不影响offsetTop offsetLeft
        position:relative;不影响offsetTop offsetLeft
   
      position:absolute;不影响offsetTop&offsetLeft
      top:500px;
   */
}

CSS