点击跟随鼠标

最新推荐文章于 2024-05-13 05:01:34 发布

转载最新推荐文章于 2024-05-13 05:01:34 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3696728/blog/1592165

本文介绍了一种使用HTML5和JavaScript实现图片跟随鼠标移动效果的方法。通过获取鼠标位置并应用缓动算法，图片能够在页面上平滑地跟随鼠标移动。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#image {
width: 99px;
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<img src="img.jpg" alt="" id="image"/>
</body>
</html>
<script>
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,
leaderY= 0,
targetX = 0,
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>