管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

记录鼠标的轨迹并回放的js代码

　　遇到的问题：

　　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需刷新才能执行]

教程首页 更多教程