您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2024/4/25 21:30:31发布22次查看
遇到的问题:
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 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 // 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需刷新才能执行]
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product