<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#image{
width: 88px;
position: absolute; /*必须定位,才可以动*/
top:0;
left:0;
}
</style>
</head>
<body>
<img src="images/img.jpg" alt="" id="image">
</body>
</html>
<script>
// document.onclick = function(event){
// // console.log(window.event.clientX);//window解决兼容问题
// var event = event || window.event; //兼容性写法
// console.log(event.clientX);
// }
var image = document.getElementById("image");
document.onclick =function(event){
var event = event || window.event;
targetX =event.clientX-image.offsetWidth/2;
targetY =event.clientY-image.offsetHeight/2;
}
//缓动
var leaderX =0;
var leaderY =0;
var targetX =0;
var targetY =0;
setInterval(function(){
leaderX = leaderX+(targetX -leaderX) /10;
leaderY = leaderY+(targetY -leaderY) /10;
image.style.left =leaderX +"px";
image.style.top =leaderY +"px";
},10)
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/1f7f2e3f297f03e358adc947c1a9f834.png)