把小人移动到鼠标点击的位置

最新推荐文章于 2022-03-22 19:32:15 发布

sdfujichao

最新推荐文章于 2022-03-22 19:32:15 发布

阅读量715

点赞数 1

分类专栏： javascript 文章标签： javascript JS事件监听变速运动

本文链接：https://blog.csdn.net/sdfujichao/article/details/51338536

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

让人移动到鼠标点击的位置。而且移动的速度是变化的。一开始让img的图片是图片1，鼠标点击后就立马变化图片2，清除时钟，根据(event.clientY - imgPre.offsetTop)/10计算速度产生时刻变化的速度。判断小人是否已经走到鼠标点击的位置（需要有X和Y的坐标都到达才行。）清除时钟。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="imgStaicId" src="img/1.gif" style=" position: absolute;top: 0px;left: 0px;"/>
</body>
<script type="text/javascript">
var imgPre = document.getElementById("imgStaicId");
var timer = null;
document.onclick = function (event){
imgPre.src = "img/2.gif";event.clientX - imgPre.offsetLeft)/10
clearInterval(timer);
timer = setInterval(function (){
var speedX = (;
var speedY = (event.clientY - imgPre.offsetTop)/10;
speedX = speedX>0?Math.ceil(speedX):Math.floor(speedX);
speedY = speedY>0?Math.ceil(speedY):Math.floor(speedY);
if(imgPre.offsetTop==event.clientY && imgPre.offsetLeft==event.clientX){
imgPre.src = "img/1.gif";
clearInterval(timer);
}else{
imgPre.style.top = imgPre.offsetTop + speedY +"px";
imgPre.style.left = imgPre.offsetLeft + speedX +"px"
}

},20);
}
</script>

</html>