您的位置：首页 > 其它

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

2016-05-07 16:31 267 查看

让人移动到鼠标点击的位置。而且移动的速度是变化的。一开始让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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航