求JS高手！DIV上面的边到鼠标的距离的问题！！！

Posted 2023-03-19

我想获取DIV的上面的边到鼠标的距离(注：鼠标是动态的，从DIV的上面的边向下移动)，这段距离怎么获取到啊！谢谢！！！

您好：鼠标距离div上边的距离距=鼠标所在位置距离浏览器上边的距离-div上边离浏览器上边的距离。div离浏览器的的距离可以用js中的offsetTop方法获得。鼠标所在位置可以用js中的clientY来获得。这样相减后就是鼠标离div上边的距离。追问

回答了问题 但我问下 浏览器右边有滚动条 向下移动是div就被移到上面了 这个影响吗？

追答

应该不会受影响的。即使受影响，打个比方div被拉到最上面已经遮起来了。那上边缘离他的距离如果有影响的话那也肯定能得到值，只不过可能是负值而已。

参考技术A <div style="width:100px; height:100px;"> </div>
<div id="div1" style="width:300px; height:300px; margin-top:30px; border:1px solid red; "></div>
<p id="p1"></p>
<script type="text/javascript">
var oDiv = $("#div1");
var offset = oDiv.offset();
$(document).mousemove(function(e)
var m = e.pageY; //鼠标据顶部的距离
var d = offset.top; //div距顶部的距离
$('#p1').html('距离：' + (m-d) + 'px' );
);
</script>

//希望可以帮到你，用的jQuery