记录鼠标的轨迹并回放

遇到的问题：

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

 

 4月19日

问题：鼠标拖动的时候会离开小方块对象。

解决方法：oSlippage.setCapture();  //即使鼠标移出对象，同样能触发事件