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>

 線上執行個體：http://www.027lover.com/jsdemo/movediv.html

一、原理分析：

1.怎麼移動？

要移動DIV到指到的座標點（X，Y），其實質，就是同時改變DIV的DIV.style.top 和 DIV.style.left 這兩個值;

2.如何看到移動？

因為要有移動效果，而不是突然間就將某個DIV的TOP和LEFT值變化為另一個值，所以就要用到:

setInterval這個阻塞函數，讓函數的執行，延遲，這樣就能看到移動效果。（只要是有的運動和移動都要用到這個函數）;

二、現實思路

1.速度

有運動，肯定就離不開速度這個概念，在這個例子中，速度是變化的，即DIV和滑鼠點擊的座標，之間的距離越大，這個速度應該越快。反之速度越慢。以保證在同一個時間內，完成不同距離的運動。

所以 速度=距離/固定值;

這樣，當距離越大，速度越快。反之越小

2.如何判斷DIV移動到了滑鼠點擊的點？

即：DIV的LEFT值和TOP值，與滑鼠點擊時的X和Y值都相等。

在這個例子中。要使用函數（Math.ceil和Math.floor） 具體可以看代碼中的注釋

 

總結：寫這個的時候想的太複雜，所以卡了好半天。思路一定要理清，再動手。

DEMO下載