在平时开发中，实现鼠标跟随效果并不是很常见，但是在一些个人博客和个人网站中这个效果有时候会用到
有些游戏网站中也会用到这个效果。这里分享的是一个例子。代码如下，，
注意我这里跟随的是一个图片，也可以根据需要把图片改成自己需要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="001.jpg" alt="" width="50" height="50" id="pic"/>
<script>
var timer = null;
var pic = document.getElementById("pic");
//在页面上 点击的时候 获取鼠标在页面上的位置 让图片 慢慢 到这个位置
document.onmousemove = function (event) {
clearInterval(timer);
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//让图片 慢慢 到这个位置
timer = setInterval(function () {
//step = (target - leader) / 10
//leader = leader + step
var targetX = pageX - pic.offsetWidth / 2;//水平方向的目标
var targetY = pageY - pic.offsetHeight / 2;//
var leaderX = pic.offsetLeft;//水平方向的当前位置
var leaderY = pic.offsetTop;//
var stepX = (targetX - leaderX) / 10;
var stepY = (targetY - leaderY) / 10;
stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
leaderX = leaderX + stepX;
leaderY = leaderY + stepY;
pic.style.left = leaderX + "px";//单位一定不要忘记
pic.style.top = leaderY + "px";//单位一定不要忘记
if (leaderX === targetX && leaderY === targetY) {
clearInterval(timer);
}
}, 1);
};
</script>
</body>
</html>
