效果:点击网页上随机一个点,图片中心移动到该点
思路:使用onclick事件,对于鼠标在页面点击的点,通过clientX/clientY和offsetWidth/offssetHeight属性得到坐标,然后使用定时器使图片减速移动到该坐标。
关键知识: 事件对象event,offsetWidth,offsetHeight
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击跟随鼠标</title>
<style>
#box img{
width: 100px;
height: 100px;
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<img src="images/img.jpg" alt=""/>
</div>
</body>
<script>
var box = document.getElementById('box');
var img = box.children[0];
document.onclick = function(event){
var event = event || window.event;
// console.log(event.clientX,event.clientY);
targetX = event.clientX-img.offsetWidth/2;
targetY = event.clientY-img.offsetHeight/2;
//防止物体部分在可视区域外,目前仅针对左上,右下未解决
if(targetX <= img.offsetWidth/2){
targetX = 0;
}
if(targetY <= img.offsetHeight/2){
targetY = 0;
}
}
//减速运动
var leaderX = 0,leaderY = 0,targetX = 0,targetY =0;
setInterval(function(){
leaderX = leaderX + (targetX - leaderX)/10;
leaderY = leaderY + (targetY - leaderY)/10;
img.style.top = leaderY + 'px';
img.style.left = leaderX + 'px';
},30);
</script>
</html>
具体效果:点击鼠标跟随