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

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

初めて、現在時刻とstartの間の時差を計算します。次のクリックでは、現在の時刻から最後のclickTimeを差し引くため、結果のクリックの差がミリ秒単位で取得されます。

それだけです、今はただ

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

JSFiddle の作業: http://jsfiddle.net/vARwz/

「正確な時間間隔の後に」物事をやりたいと思うので、jQuery .delay()メソッドを使用できるかもしれません。

私はあなたが望むことをする方法、手がかりを与えたことを願っています。

于 2013-07-23T22:57:11.707 に答える