<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#image{
width: 100px;
height: 100px;
position:absolute;
left:0;
top: 0;
}
</style>
</head>
<body>
<img src="img.jpg" id="image">
<script>
//鼠标点击文档的任意位置时，图片跟着走动,(利用事件对象)，以及坐标位置（以可视区为基准点clientX clientY）
var image = document.getElementById("image");
document.onclick = function(event){
// console.log(event.clientX)
targetX = event.clientX - image.offsetWidth/2;
targetY = event.clientY - image.offsetHeight/2;
}
//缓动公式
var leaderX = 0, targetX = 0;
var leaderY = 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>
</body>
</html>
转载于:https://www.cnblogs.com/zhaocong/p/7083840.html
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
