<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>
一、原理分析：
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） 具體可以看代碼中的注釋
總結：寫這個的時候想的太復雜，所以卡了好半天。思路一定要理清，再動手。
以上就是本文的全部內容，希望對大家有所幫助，謝謝對的支持！