JavaScript实现鼠标轨迹记录与平滑回放功能

鼠标轨迹记录与回放功能实现

遇到的问题：

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);
} 

演示效果：

 <div style="border-bottom: #000000 1px solid; position: relative; border-left: #000000 1px solid; width: 500px; height: 200px; border-top: #000000 1px solid; border-right: #000000 1px solid" id="map"> <div style="z-index: 99; position: absolute; background-color: #000000; width: 30px; height: 30px; top: 50px; cursor: move; left: 50px; background-origin: initial; background-clip: initial" id="slippage" onmouseup="MOUSETRACKRECORD.mouseUp();" onmousemove="MOUSETRACKRECORD.mouseMove();" onmousedown="MOUSETRACKRECORD.mouseDown();"></div></div><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">