ネイティブJSが様々なスポーツの均一な動きを実現
|
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。
実際の開発では、このようなモーションエフェクトはほとんど使用されないことに注意してください。弾性モーションとバッファリングモーションの方が一般的に使用されます。以下はコード実装です。コピー、貼り付け、コメントを自由に行ってください。
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>ネイティブ JS でさまざまなスポーツの均一な動作を実現</title>
<スタイル>
#div1 {
幅: 100ピクセル;
高さ: 100px;
位置: 絶対;
背景: 赤;
左: 0;
上: 50px;
}
スパン {
幅: 1px;
高さ: 300px;
背景：黒;
位置: 絶対;
左: 300ピクセル;
上: 0;
}
;
</スタイル>
<script type="text/javascript">
var タイマー = null;
関数 startMove(iTarget) {
var oDiv = document.getElementById('div1');
タイマーの間隔をクリアします。
タイマー = setInterval(関数() {
var iSpeed = 0;
oDiv.offsetLeft < iTarget の場合 {
iスピード = 7;
} それ以外 {
iスピード = -7;
}
//終点に到達したか if (Math.abs(oDiv.offsetLeft - iTarget) < 7) {
// 終了ポイントに到達 clearInterval(timer);
oDiv.style.left = iTarget + 'px';
} それ以外 {
//到着前 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</スクリプト>
</head>
<本文>
<input type="button" value="移動を開始" onclick="startMove(300)" />
<div id="div1"></div>
<span></span>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: mysql 8.0.19 win10 クイックインストールチュートリアル
推薦する
MySQL FAQ シリーズ: 一時テーブルを使用する場合
一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...
ネイティブ JavaScript でシンプルな Gobang ゲームを実装する
この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...
xshell を使用して VMware で Linux に接続する方法 (2 つの方法)
【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...
HTML内の画像はbase64でエンコードされた文字列に直接置き換えられます
最近、画像はあるのに外部画像リソースが参照されていないウェブページを見つけました。気になりました。コ...
Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル
目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...
MySQL 中断された接続警告ログの分析
序文：場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...
MySQL テーブルと列のコメントの概要
コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...
ECMAscript の新機能の紹介
目次1. 関数パラメータのデフォルト値1.1 関数パラメータのデフォルト値の指定1.2 分離割り当て...
MySQLにおけるrow_numberの実装プロセス
1. 背景一般的に、データ ウェアハウス環境では、row_number 関数を使用して特定のディメン...
Linux で Nginx 1.16.0 をインストールするための詳細なチュートリアル
最近 Linux をいじっていたので、nginx の新しいバージョンをインストールしたいと思いました...
Linux ネットワーク システムの紹介
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...
MySQLのワークベンチ例の詳細な説明
MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...
Dockerコンテナでユーザーを切り替えるときに権限が不足する問題を解決する方法
Docker コンテナでユーザーを切り替えると、権限が不十分であるというメッセージが表示されます。解...
IDEA は Docker プラグインを使用します (初心者向けチュートリアル)
目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...
Linux で大容量メモリ ページを持つ Oracle データベースを最適化する方法
序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...