需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置(兼容ie6,7做pageY和pageX)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
}
img{
position: absolute;
padding: 10px 0;
cursor: pointer;
border:1px solid #ccc;
}
</style>
</head>
<body>
<img src="../images/img.jpg" width="100"/>
<script type="text/javascript">
//需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
//思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置
//兼容ie6,7做pageY和pageX
//原理：鼠标在页面的位置 = 被卷去的部分 + 可视区域部分
//步骤：
//1.老三步
//2.获取鼠标在页面的位置
//3.利用缓动原理，慢慢的运动到指定位置(包括左右和上下)
//获取相关元素并绑定事件
var img = document.getElementsByTagName("img")[0];
var timer =null;
var targetx = 0;
var targety = 0;
var leaderx = 0;
var leadery = 0;
//给整个文档绑定点击事件获取鼠标的位置
document.onclick = function(event){
//兼容获取事件对象
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
targety = pagey-30;
targetx = pagex-50;
//利用缓动动画
//要用定时器，先清定时器
clearInterval(timer);
timer = setInterval(function(){
//为盒子的位置获取X值
leaderx = img.offsetLeft;
//获取步长
var stepx = (targetx - leaderx)/10;
//二次处理步长
stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
leaderx =leaderx +stepx;
//赋值
img.style.left = leaderx +"px";
//为盒子的位置获取Y值
leadery = img.offsetTop;
//获取步长
var stepy = (targety - leadery)/10;
//二次获取步长
stepy= stepy>0?Math.ceil(stepy):Math.floor(stepy);
leadery = leadery +stepy;
//赋值
img.style.top = leadery + "px";
//清除定时器
if (Math.abs(targety - img.offsetTop)<=Math.abs(stepy)&&Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)) {
img.style.top = targety + "px";
img.style.left = targetx +"px";
clearInterval(timer);
}
},30);
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/creazybeauty/p/8177310.html
时间： 2024-11-09 01:01:26