感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标位置 路口师傅</title>
</head>
<body>
<!--table-->
<table>
<tr>
<td>X轴:</td><td id="xx"></td>
</tr>
<td>Y轴:</td><td id="yy"></td>
</table>
<!--div-->
<div id="div">
</div>
<!--script 放在下边-->
<script>
/*窗口滚动距离
document.body.scrollTop;
document.body.scrollLeft;
*/
var oDiv = document.getElementById('div');
oDiv.onmousemove=function(event){
/*得到相对于盒子的鼠标位置*/
document.getElementById('xx').innerHTML = (event.clientX-document.body.scrollLeft)-oDiv.offsetLeft;
document.getElementById('yy').innerHTML = (event.clientY-document.body.scrollTop)-oDiv.offsetTop;
}
/*
offsetLeft
offsetTop
普通元素位置
----------------------------------
event.clientX-document.body.scrollLeft
event.clientY-document.body.scrollTop
鼠标相对于文档位置(已加入窗口滚动情况)
</script>
</body>
</html>
输入 JavaScript 代码……
xxxxxxxxxx
table{
border:1px solid blue;
table tr,td{
#div{
width:500px;
height:100px;
内外边距不影响offsetLeft与offsetTop
padding:20px;
margin:20px;