ネイティブ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 クイックインストールチュートリアル
推薦する
WeChatアプレット開発で遭遇したことのない落とし穴のまとめ
目次getApp()ページエントリファイルの先頭に変数を定義しますwx.createSelector...
MYSQL マスタースレーブ レプリケーションの知識ポイントの概要
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...
mysqlは、現在の時刻が開始時刻と終了時刻の間にあるかどうかを判断し、開始時刻と終了時刻が空であることが許可されます。
目次要件: 進行中のアクティビティ データを照会する次のSQLクエリは、上記の4つの要件を満たし、タ...
MySQL での数値のフォーマットの詳細な説明
最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...
Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
システム外のフォント参照とトランジション効果
コードをコピーコードは次のとおりです。 <span style="font-fami...
HTML チュートリアル: よく使われる HTML タグのコレクション (6)
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明
Macはシェル（ターミナル）SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...
MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)
MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...
Xmeter APIインターフェーステストツールの使用状況の分析
XMeter API は、以下のサービスを含む、JMeter に基づくワンストップのオンライン イン...
コードをセマンティックにする HTML のヒント
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
JavaScript でじゃんけんゲームを書く
この記事では、JavaScriptでじゃんけんゲームを書くための具体的なコードを参考までに紹介します...
CUDA8.0とCUDA9.0はUbuntu16.04で共存します
序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...
kindとDockerを使用してローカルKubernetes環境を起動する
導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...
Dockerコマンドの自動補完の実装
序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...