js实现鼠标跟随效果

最新推荐文章于 2024-07-23 16:20:42 发布

君子-如兰

最新推荐文章于 2024-07-23 16:20:42 发布

阅读量1.1w

点赞数 2

文章标签： javascript 前端开发

本文链接：https://blog.csdn.net/ltmtianming/article/details/78944875

版权

在平时开发中，实现鼠标跟随效果并不是很常见，但是在一些个人博客和个人网站中这个效果有时候会用到

有些游戏网站中也会用到这个效果。这里分享的是一个例子。代码如下，，

注意我这里跟随的是一个图片，也可以根据需要把图片改成自己需要的

<!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>