需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置(兼容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>