<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#pic{
width:50px;
height:50px;
position:absolute; /*要定位，否则style.left没办法用*/
top:0;
left:0;
}
</style>
</head>
<body>
<img src="img.jpg" alt="" id="pic">
</body>
</html>
<script>
document.onclick=function(event)
{
var event=event || window.event;
targetX=event.clientX-pic.offsetWidth/2; //减去盒子宽度和高度，最终鼠标光标可以定位到图片正中间
targetY=event.clientY-pic.offsetHeight/2;
}
var leaderX=0;
var targetX=0;
var leaderY=0;
var targetY=0;
var pic=document.getElementById("pic");
setInterval(fn,10);
function fn()
{
leaderX=leaderX+(targetX-leaderX)/10;
leaderY=leaderY+(targetY-leaderY)/10;
pic.style.left=leaderX+"px";
pic.style.top=leaderY+"px";
}
</script>
