ネイティブ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データベーストリガーの詳細な説明
目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...
Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します
Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバル...
Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する
MySQL proxies_priv（シミュレートされたロール）を使用して同様のユーザーグループ管理...
興味深いカウントダウン効果を実現するjs
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード： <!DO...
強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する
目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...
Linux システムでログを手動でスクロールする方法
ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...
LNMP を展開して HTTPS サービスを有効にする方法に関するチュートリアル
LNMP とは: Linux+Nginx+Mysql+(php-fpm、php-mysql)つまり、...
Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題
目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...
Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法
Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...
純粋な CSS で中空効果を実現するためのサンプルコード
私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...
MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック
MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...
リモートDockerを使用した統合テスト環境の構築手順
需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...
jsは動的にテーブルを生成します（ノード操作）
この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...
MYSQL updatexml() 関数のエラーインジェクション分析
まず、updatexml()関数を理解する UPDATEXML (XML ドキュメント、XPath ...