为图片设置了一个父级div，设置的是相对父级div的鼠标移动事件。但是当鼠标移出此div后图片还是可以跟随鼠标移动。而且当鼠标移动速度过快离开了图片，图片就不会再移动了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
position:absolute;
width: 50px;
height: 50px;
}
div{
background-color:red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="dv">
<img src="1.jpg" alt="" id="im">
</div>
<script>
my$("dv").onmousemove=function(e){
document.getElementById("im").style.left=e.clientX-20+"px";
document.getElementById("im").style.top=e.clientY-20+"px";
console.log(e.clientX+"hhh"+e.clientY);
}
function my$(element){
return document.getElementById(element);
}
</script>
</body>
</html>
代码如上，求大神解惑。。。
兄弟，你如果希望鼠标移出div时img卡在div边缘的话，要加一层判断，每次移动前先判断img的left和top值是否越过了边界，如果越过了就直接赋值边缘的top和left值，如果没越过就正常移动。还有就是鼠标移出div时要取消绑定事件，鼠标进入div是重新设定img的位置。需要具体代码可以联系～