マウスの軌跡を記録して再生するための js コード_javascript スキル-jsチュートリアル-php.cn

マウスの軌跡を記録して再生するための js コード_javascript スキル

WBOY

リリース： 2016-05-16 18:29:25

オリジナル

1761 人が閲覧しました

発生した問題:
質問
①: Mousemove イベントでは、多くの left と top が move メソッドに記録されます。必要なデータは数セットだけです。
Question②: 再生中、for ループの実行が速すぎて、開始位置と終了位置が直接表示されてしまいました。遅延関数を作成したのですが、それでもありませんでした。実質的な解決策。

小さな正方形を新しい位置までゆっくりとドラッグし、マウスを放します。

最初に「リセット」をクリックし、次に「再生」をクリックして、渡されたパスを表示します。
のみです。ワンチャンス - -|||

ループ内で遅延したコードの一部:

コードをコピーコードは次のとおりです:

//Delay メソッド
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. 🎜>} 
} 

 
スロー再生の効果はまだ達成されておらず、解決する必要があります。 。 。 
あ、今朝解決しました～！ 
for ループは必要ありません。配列の添字を使用してタイマーを使用して、小さな正方形の左と上を連続的に変更します。 

配列の添字と組み合わせたタイマー

コードをコピー

コードは次のとおりです: //遅延メソッドsleep: function(n) { //var start = new Date().getTime();

//while (true)

// if (new Date().getTime() - start > n) 
// ブレーク; 
var oSlippage = document.getElementById("lippage"); 
oSlippage.style.left = this.X[this.iNum] - this.relativeX は配列の添字です。 🎜>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); 🎜>

デモ効果: 