快捷導(dǎo)航

記錄鼠標(biāo)的軌跡并回放的js代碼

更新時(shí)間：2010年04月17日 23:59:55 作者：

用js實(shí)現(xiàn)的記錄鼠標(biāo)的軌跡并回放的效果，非常不錯(cuò)。

遇到的問(wèn)題：
Question
①：mousemove事件中，移動(dòng)方法中會(huì)被記錄很多的left和top，我只需要大概的幾組數(shù)據(jù)就行，不需要那么多；
Question
②：回放的時(shí)候，在for循環(huán)里執(zhí)行太快了，導(dǎo)致的效果就是直接看到開(kāi)始跟結(jié)束位置，我想放慢中間的過(guò)程；搞了一個(gè)延遲的函數(shù)，但是還是沒(méi)有實(shí)質(zhì)性解決。

慢慢慢慢拖動(dòng)小方塊到一個(gè)新位置，然后松開(kāi)鼠標(biāo)，

先點(diǎn)擊“復(fù)位”，再點(diǎn)擊“回放”查看所經(jīng)過(guò)的路徑，
只有一次機(jī)會(huì)哦 - -|||
循環(huán)內(nèi)延遲的部分代碼：

復(fù)制代碼代碼如下:

 
//延遲方法 
sleep: function(n) { 
var start = new Date().getTime(); 
while (true) 
if (new Date().getTime() - start > n) 
break; 
}, 
//回看軌跡記錄 
backTrack: function() { 
var oSlippage = document.getElementById("slippage"); 
var len = this.X.length; 
for (var i = 0; i < len; i++) { 
oSlippage.style.left = this.X[i] - this.relativeX; 
oSlippage.style.top = this.Y[i] - this.relativeY; 
//延遲循環(huán)方法 
this.sleep(10); 
} 
} 

還是沒(méi)有達(dá)到慢慢回放的效果，待解決。。。
啊哈，今早解決了~！
不用for循環(huán)，通過(guò)定時(shí)器運(yùn)用數(shù)組的下標(biāo)來(lái)不斷改變小方塊的left和top

定時(shí)器結(jié)合數(shù)組下標(biāo)

復(fù)制代碼代碼如下:

 
//延遲方法 
sleep: function(n) { 
//var start = new Date().getTime(); 
//while (true) 
// if (new Date().getTime() - start > n) 
// break; 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = this.X[this.iNum] - this.relativeX; //iNum為數(shù)組下標(biāo) 
oSlippage.style.top = this.Y[this.iNum] - this.relativeY; 
MOUSETRACKRECORD.iNum++; 
//如果下標(biāo)大于了他的長(zhǎng)度就停止回放 
if (this.iNum > this.X.length - 1) { 
clearInterval(this.timeID); 
} 
}, 
//回看軌跡記錄 
backTrack: function() { 
//var oSlippage = document.getElementById("slippage"); 
//var len = this.X.length; 
//for (var i = 0; i < len; i++) { 
// oSlippage.style.left = this.X[i] - this.relativeX; 
// oSlippage.style.top = this.Y[i] - this.relativeY; 
// //延遲循環(huán)方法 
// this.sleep(10); 
//} 
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10); 
} 