ネイティブ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 クイックインストールチュートリアル
推薦する
Reactでコンポーネントロジックを共有する3つの方法
簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...
小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法
最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...
CocosCreatorでゲームコントローラーを使用する方法
目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...
Dockerコンテナ内の設定ファイルの変更の実装
1. コンテナに入るdocker run [オプション] イメージ名 [起動コンテナに渡されるコマン...
Dockerイメージのインポートとエクスポートの実装
GitLabのDocker使用法gitlab ドッカー起動コマンド docker run -d -p...
ログインボックスのドラッグ効果を実現するためのJavascript
この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...
MySQL 5.7.20 共通ダウンロード、インストール、設定方法と簡単な操作スキル（解凍版無料インストール）
早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...
Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明
目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...
MySQLクエリキャッシュに関するヒント
目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...
Node-Redを使用してMySQLデータベースに接続する方法
Node-red をデータベース (mysql) に接続するには、まずコンピューターに MySQL ...
MySQL ユーザー権限管理の分析例
この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...
div の水平レイアウトを両側に揃える 3 つの方法
この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...
フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)
この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...
10 HTML テーブル関連タグ
実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...
GNU Parallelの具体的な使用法
それは何ですか？ GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...