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

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

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

演示效果：
<script type="text/javascript"> MOUSETRACKRECORD = { oSlippage: null, //小方塊 X: [], //X坐標 Y: [], //Y坐標 clickX: 0, //鼠標點擊時的X坐標 clickY: 0, //鼠標點擊時的Y坐標 relativeX: 0, //鼠標相對方塊的X坐標 relativeY: 0, //鼠標相對方塊的Y坐標 isCanMove: false, //是否可以移動 iNum: 0, //坐標XY數組的下標 timeID: null, //回放定時器 //鼠標按下的時候 mouseDown: function() { //鼠標點擊時 this.clickX = event.clientX; this.clickY = event.clientY; //獲取小方塊 var oSlippage = document.getElementById("slippage"); //獲取div當前坐標(左邊界和上邊界) var divX = parseInt(oSlippage.style.left) || 0; var divY = parseInt(oSlippage.style.top) || 0; //獲取鼠標相對div的坐標 this.relativeX = this.clickX - divX; this.relativeY = this.clickY - divY; //設置可以移動 this.isCanMove = true; }, //鼠標移動的時候 mouseMove: function() { if (this.isCanMove) { var oSlippage = document.getElementById("slippage"); oSlippage.style.left = event.clientX - this.relativeX; oSlippage.style.top = event.clientY - this.relativeY; //移動就記錄下鼠標的軌跡 MOUSETRACKRECORD.startRecord(event.clientX, event.clientY); } }, //鼠標松開的時候 mouseUp: function() { //取消小方塊的mousemove事件 var oSlippage = document.getElementById("slippage"); oSlippage.onmousemove = null; this.isCanMove = false; //停止記錄 clearInterval(this.timeID); }, //開始記錄鼠標移動過的坐標 startRecord: function(x, y) { this.X.push(x); this.Y.push(y); }, //點擊停止按鈕，回到初始狀態 overTrack: function() { var oSlippage = document.getElementById("slippage"); oSlippage.style.left = 50; oSlippage.style.top = 50; }, //延遲方法 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; 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); }, //初始化 init: function() { location.reload(); } } </ script> <input id="Button1" onclick="MOUSETRACKRECORD.overTrack();" value="復位" type="button"> <input id="Button2" onclick="MOUSETRACKRECORD.backTrack();" value="回放" type="button"> <input id="Button3" onclick="MOUSETRACKRECORD.init();" value="再來一次" type="button">
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com