<script type="text/javascript">
 //那種方式移動(dòng)
 var choMove = false;
 //是否綁定過(guò)click
 var isClick = true;
 //引用DIV
 var oDiv = null;
 //引用Input
 var oInput = null;
 //封裝事件綁定的通用對(duì)象
 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ù)開(kāi)關(guān)，來(lái)讓document的Click事件綁定不同的動(dòng)畫(huà)函數(shù)
 var eventMove = function(event){
  var ev = event || window.event;
  choMove==true?clickMove(ev):slideMove(ev); 
 } 
 //根據(jù)鼠標(biāo)點(diǎn)擊位置移動(dòng)動(dòng)畫(huà)一
 var clickMove = function(cev){
  var mouseX = cev.clientX;   //鼠標(biāo)點(diǎn)擊的橫坐標(biāo)
  var mouseY = cev.clientY;  //鼠標(biāo)點(diǎn)擊的縱坐標(biāo)
   //取消document的click事件綁定的函數(shù)，以避免在動(dòng)畫(huà)中，擊點(diǎn)頁(yè)面會(huì)又一次觸發(fā)這個(gè)動(dòng)畫(huà)
  evnetUtil.removeEventHandle(document,'click',eventMove);
  var setCliMove = setInterval(function(){
    var oDivLeft = oDiv.offsetLeft; //DIV在頁(yè)面中的Left值;
    var oDivTop = oDiv.offsetTop; //DIV在頁(yè)面中的Top值;
    /*橫坐標(biāo)移動(dòng)的速，即每30毫秒，移動(dòng)speedX距離
    *mouseX-oDivLeft當(dāng)前DIV與目標(biāo)點(diǎn)之間的距離，
    *除以5，就是將這個(gè)距離分成5份
    *分母5不變，距離越小，所以移動(dòng)速度就越慢
    */
    var speedX = (mouseX-oDivLeft)/5; 
    //縱坐標(biāo)移動(dòng)的速度，即每30毫秒，移動(dòng)speedX距離，這個(gè)speedY是變化的，距離鼠標(biāo)點(diǎn)擊的位置越近，這個(gè)值越小
    var speedY = (mouseY-oDivTop)/5; 
    /*這里必需使用向上或向下取舍的函數(shù)（Math.ceil和Math.floor）
    *因?yàn)閟peedX和speedY是一個(gè)變化的值，即將DIV和鼠標(biāo)點(diǎn)擊的點(diǎn)X坐標(biāo)之間的距離，平均分成5分，
    *mouseX == oDiv.offsetLeft就永遠(yuǎn)不可能相等，就不會(huì)執(zhí)行if里面的語(yǔ)句了,所以這將一直循環(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);
    //用當(dāng)位置的TOP或left值，去加上每一次，即每30毫秒移動(dòng)的距離，就得到新的坐標(biāo)
    oDiv.style.left = oDivLeft + "px";
    oDiv.style.top = oDivTop + "px";
    //如果到達(dá)鼠標(biāo)點(diǎn)擊的位置
    if(mouseX == oDiv.offsetLeft && mouseY == oDiv.offsetTop){
     //清除這個(gè)運(yùn)動(dòng)動(dòng)畫(huà)
     clearInterval(setCliMove);
     //恢復(fù)document的click綁定的事件
     evnetUtil.addEventHandle(document,'click',eventMove);
    } 
  },30);
 } 
 //根據(jù)標(biāo)鼠標(biāo)軌跡移動(dòng)動(dòng)畫(huà)二
 var slideMove = function(cev){
  alert("正在制做當(dāng)中……");
 } 
 //綁定事件,改變input狀態(tài)（事件對(duì)象，input對(duì)象，標(biāo)識(shí)點(diǎn)擊的那個(gè)Input）
 var binds = function(cev,oElem,index){
  //防止多次點(diǎn)擊同一個(gè)Input
  if(oElem.className == ""){
   oElem.value=oElem.value+"(已激活)"
   oElem.className = "cur";
  }
  //點(diǎn)擊不同的input顯示不同文字和啟用不同動(dòng)畫(huà)開(kāi)關(guān)
  if(index==0){
   oInput[1].value = "根據(jù)標(biāo)鼠標(biāo)軌跡移動(dòng)";
   oInput[1].className = "";
   choMove = true;
  }else{
   oInput[0].value = "根據(jù)鼠標(biāo)點(diǎn)擊位置移動(dòng)";
   oInput[0].className = "";
   choMove = false;
  }
  //只綁document定一次,再次點(diǎn)擊無(wú)需綁定，只需要啟用不同的動(dòng)畫(huà)模式
  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>