本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单
代码如下
<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#image{
width: 99px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="images/img.jpg" alt="good" id="image"/>
</body>
</html>
<script>
var image = document.getElementById("image");
var leaderX = 0,leaderY = 0,targetX = 0,targetY = 0;
document.onclick = function(event){
// 1.事件对象的兼容性处理
var event = event || window.event;
// 2.clientX 获取网页的水平坐标
targetX = event.clientX - image.offsetWidth/2;
// 3.clientX 获取网页的竖直坐标
targetY = event.clientY - image.offsetHeight/2;
}
setInterval(function(){
// 4.缓动公式
leaderX = leaderX + (targetX - leaderX) / 10;
leaderY = leaderY + (targetY - leaderY) / 10;
image.style.left = leaderX + "px";
image.style.top = leaderY + "px";
},10);
</script>效果图
鼠标点击哪里，图标会跟着运动。