記錄鼠標的軌跡并回放的js代碼

2024-05-06 14:10:27

字體：大中小

來源：轉載

供稿：網友

遇到的問題：
Question
①：mousemove事件中，移動方法中會被記錄很多的left和top，我只需要大概的幾組數據就行，不需要那么多；
Question
②：回放的時候，在for循環里執行太快了，導致的效果就是直接看到開始跟結束位置，我想放慢中間的過程；搞了一個延遲的函數，但是還是沒有實質性解決。

慢慢慢慢拖動小方塊到一個新位置，然后松開鼠標，

先點擊“復位”，再點擊“回放”查看所經過的路徑，
只有一次機會哦 - -|||
循環內延遲的部分代碼：
代碼如下:
//延遲方法
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;
//延遲循環方法
this.sleep(10);
}
}

還是沒有達到慢慢回放的效果，待解決。。。
啊哈，今早解決了~！
不用for循環，通過定時器運用數組的下標來不斷改變小方塊的left和top

定時器結合數組下標
代碼如下:
//延遲方法
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為數組下標
oSlippage.style.top = this.Y[this.iNum] - this.relativeY;
MOUSETRACKRECORD.iNum++;
//如果下標大于了他的長度就停止回放
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;
// //延遲循環方法
// this.sleep(10);
//}
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10);
}

演示效果：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：jQuery 類twitter的文本字數限制帶提示效果插件

下一篇：JS input文本框禁用右鍵和復制粘貼功能的代碼

學習交流

硬盤分區如何設置準確的分區空間

硬盤分區如何設置準確的分區空間...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注