需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置(兼容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>JS之鼠标跟随
原文地址：https://www.cnblogs.com/creazybeauty/p/8177310.html