javascript实现鼠标点击页面 移动DIV

<script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = {  addEventHandle:function(oElement,evtype,fun){   oElement.attachEvent?oElement.attachEvent("on"+evtype,fun):oElement.addEventListener(evtype,fun,false);  },  removeEventHandle:function(oElement,evtype,fun){   oElement.detachEvent?oElement.detachEvent("on"+evtype,fun):oElement.removeEventListener(evtype,fun,false);  } } //根据开关，来让document的Click事件绑定不同的动画函数 var eventMove = function(event){  var ev = event || window.event;  choMove==true?clickMove(ev):slideMove(ev);  }  //根据鼠标点击位置移动动画一 var clickMove = function(cev){  var mouseX = cev.clientX;   //鼠标点击的横坐标  var mouseY = cev.clientY;  //鼠标点击的纵坐标   //取消document的click事件绑定的函数，以避免在动画中，击点页面会又一次触发这个动画  evnetUtil.removeEventHandle(document,'click',eventMove);  var setCliMove = setInterval(function(){    var oDivLeft = oDiv.offsetLeft; //DIV在页面中的Left值;    var oDivTop = oDiv.offsetTop; //DIV在页面中的Top值;    /*横坐标移动的速，即每30毫秒，移动speedX距离    *mouseX-oDivLeft当前DIV与目标点之间的距离，    *除以5，就是将这个距离分成5份    *分母5不变，距离越小，所以移动速度就越慢    */    var speedX = (mouseX-oDivLeft)/5;     //纵坐标移动的速度，即每30毫秒，移动speedX距离，这个speedY是变化的，距离鼠标点击的位置越近，这个值越小    var speedY = (mouseY-oDivTop)/5;     /*这里必需使用向上或向下取舍的函数（Math.ceil和Math.floor）    *因为speedX和speedY是一个变化的值，即将DIV和鼠标点击的点X坐标之间的距离，平均分成5分，    *mouseX == oDiv.offsetLeft就永远不可能相等，就不会执行if里面的语句了,所以这将一直循环下去    */    oDivLeft = mouseX-oDivLeft>0?Math.ceil(oDivLeft+speedX):Math.floor(oDivLeft+speedX);    oDivTop = mouseY-oDivTop>0?Math.ceil(oDivTop+speedY):Math.floor(oDivTop+speedY);    console.log(oDivLeft);    //用当位置的TOP或left值，去加上每一次，即每30毫秒移动的距离，就得到新的坐标    oDiv.style.left = oDivLeft + "px";    oDiv.style.top = oDivTop + "px";    //如果到达鼠标点击的位置    if(mouseX == oDiv.offsetLeft && mouseY == oDiv.offsetTop){     //清除这个运动动画     clearInterval(setCliMove);     //恢复document的click绑定的事件     evnetUtil.addEventHandle(document,'click',eventMove);    }   },30); }  //根据标鼠标轨迹移动动画二 var slideMove = function(cev){  alert("正在制做当中……"); }  //绑定事件,改变input状态（事件对象，input对象，标识点击的那个Input） var binds = function(cev,oElem,index){  //防止多次点击同一个Input  if(oElem.className == ""){   oElem.value=oElem.value+"(已激活)"   oElem.className = "cur";  }  //点击不同的input显示不同文字和启用不同动画开关  if(index==0){   oInput[1].value = "根据标鼠标轨迹移动";   oInput[1].className = "";   choMove = true;  }else{   oInput[0].value = "根据鼠标点击位置移动";   oInput[0].className = "";   choMove = false;  }  //只绑document定一次,再次点击无需绑定，只需要启用不同的动画模式  if(isClick){   evnetUtil.addEventHandle(document,'click',eventMove);   isClick = false;  }  //防止冒泡  cev.stopPropagation ?cev.stopPropagation() : (cev.cancelBubble=true); } window.onload = function(){  oInput = document.getElementsByTagName("input");  oDiv = document.getElementsByTagName("div")[0];  oInput[0].onclick = function(event){   var This = this;   var ev = event || window.event;   binds(ev,This,0);   }    oInput[1].onclick = function(event){   var This = this;   var ev = event || window.event;   binds(ev,This,1);  } } </script>