<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);  } } //根據(jù)開關(guān)，來讓document的Click事件綁定不同的動畫函數(shù) var eventMove = function(event){  var ev = event || window.event;  choMove==true?clickMove(ev):slideMove(ev);  }  //根據(jù)鼠標點擊位置移動動畫一 var clickMove = function(cev){  var mouseX = cev.clientX;   //鼠標點擊的橫坐標  var mouseY = cev.clientY;  //鼠標點擊的縱坐標   //取消document的click事件綁定的函數(shù)，以避免在動畫中，擊點頁面會又一次觸發(fā)這個動畫  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;     /*這里必需使用向上或向下取舍的函數(shù)（Math.ceil和Math.floor）    *因為speedX和speedY是一個變化的值，即將DIV和鼠標點擊的點X坐標之間的距離，平均分成5分，    *mouseX == oDiv.offsetLeft就永遠不可能相等，就不會執(zhí)行if里面的語句了,所以這將一直循環(huán)下去    */    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); }  //根據(jù)標鼠標軌跡移動動畫二 var slideMove = function(cev){  alert("正在制做當中……"); }  //綁定事件,改變input狀態(tài)（事件對象，input對象，標識點擊的那個Input） var binds = function(cev,oElem,index){  //防止多次點擊同一個Input  if(oElem.className == ""){   oElem.value=oElem.value+"(已激活)"   oElem.className = "cur";  }  //點擊不同的input顯示不同文字和啟用不同動畫開關(guān)  if(index==0){   oInput[1].value = "根據(jù)標鼠標軌跡移動";   oInput[1].className = "";   choMove = true;  }else{   oInput[0].value = "根據(jù)鼠標點擊位置移動";   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>