<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
#div1{
width: 100px;
height: 200px;
position: absolute;
background: red;
}
</style>
<script type="text/javascript">
//实现:鼠标移动到哪里,物体就跟着移动到哪里
// document.οnmοusemοve=function(ev){
// var oEvent=ev||event;
// var oDiv=document.getElementById('div1');
// var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//
// oDiv.style.left=oEvent.clientX+'px';
// oDiv.style.top=oEvent.clientY+scrollTop+'px';
// };
//将以上获取鼠标位置的方法封装成函数
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return{x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.οnmοusemοve=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};
</script>
</head>
<!-- 在style="height:2000px;"没有加之前,物体能够很好的跟随鼠标移动,并且鼠标贴在物体的左上顶点,
即使滑动也没关系,加了之后,鼠标滚动就会导致鼠标与物体之间出现距离,出现这个的原因在于:clientX
clientY都是指可见区域的坐标,在没加style="height:2000px;"之前可见区域与整个页面的区域重合,
就不会出现问题;解决办法:使用scrollTop来获取当前页面滚动条的纵坐标的位置+clientY就是物体的真正的高了
-->
<body style="height:2000px;">
<div id='div1'></div>
</body>
</html>
JS小练习之鼠标事件——让物体跟随鼠标移动
最新推荐文章于 2024-08-11 09:55:43 发布