jQuery 记录/播放鼠标移动

Question

demo

它是如何工作的:

Press the "record" button and start clicking in the red div, the black box will start to follow your clicks, use the mouse wheel inside the black box only to resize it. When you are done, press the play button. The reset button resets the coordinates and the counter.

它并不完美，我是 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

我希望我解释得很好..

Answer 1

给你:http://jsfiddle.net/markasoftware/dEXpY/26/抱歉，代码中没有注释，所以您必须自己弄清楚。我还修复了我在对您的问题的评论中提到的调整大小错误，并且当您单击“开始”时，记录按钮中的文本会更改回记录。