3

演示

这个怎么运作：

按下“记录”按钮并开始点击红色的div，黑框将开始跟随您的点击，使用黑框内的鼠标滚轮只调整它的大小。完成后，按播放按钮。重置按钮重置坐标和计数器。

它并不完美，我是 jQuery 的初学者，但至少它可以工作......

我写这个问题是因为我想实现某种计时器，它以毫秒为单位，每一毫秒都存储在一个数组中。在该数组中，每毫秒都会存储盒子的当前坐标和大小，因此当您运行它时，它将在您“记录它”的确切时间间隔之后移动并调整盒子的大小。

前任：

00:00 - top:0px, left:0px, width:50px, height:50px
00:10 - top:0px, left:0px, width:50px, height:50px
00:20 - top:0px, left:0px, width:50px, height:50px
00:30 - top:0px, left:0px, width:50px, height:50px
00:40 - top:110px, left:20px, width:50px, height:50px
...
01:40 - top:110px, left:20px, width:70px, height:70px
01:50 - top:310px, left:250px, width:70px, height:70px
...
04:20 - top:17px, left:231px, width:10px, height:10px
...
10:50 - top:502px, left:354px, width:100px, height:100px

我希望我解释得很好..

4

2 回答 2

1

你去： http: //jsfiddle.net/markasoftware/dEXpY/26/ 对不起，代码中没有注释，所以你必须自己弄清楚。我还修复了我在对您的问题的评论中所说的调整大小错误，并且我还做了它，以便当您单击开始时，记录按钮中的文本会变回记录。

于 2013-07-24T03:22:19.347 回答
0

我的方法是使用

new Date().getTime(); //  gets the time value in milliseconds from a current date.

新变量：

clickTime = [];
timeDiffs = [];
start = 0;

首先记录按下录制按钮时的开始时间。然后，每次点击事件发生时，都会用当前时间（以毫秒为单位）更新clickTime 。

然后，在单击事件中执行以下操作：

if(i == 0){
  timeDiffs[i] = new Date().getTime() - startTime;
}else{
  timeDiffs[i] = new Date().getTime() - clickTime[i-1];
}

第一次计算当前时间和开始时间之间的时间差。对于下一次点击，从当前时间中减去最后一次点击时间，因此我们将以毫秒为单位获得后续点击之间的差异。

就是这样，现在只是

$(".inner").animate( { left: arrX[i], top: arrY[i]}, timeDiffs[i]);

工作 JSFiddle：http: //jsfiddle.net/vARwz/

我看到你想在“确切的时间间隔之后”做这些事情，所以也许你可以使用 jQuery .delay()方法。

我希望，我给了你一个线索，如何做你想做的事。

于 2013-07-23T22:57:11.707 回答