思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。 主な方法は、margin-left / top の値を使用して変位させることです。もちろん、配置を使用してこれを行うこともできます。 この場合に使用されるものは次のとおりです。
コードについて ネイティブjsを全体的に使用する <スタイル> //スタイル スタイル* { マージン: 0; パディング: 0; } #箱 { 幅: 500ピクセル; 高さ: 600px; 背景色: #eee; ボックスシャドウ: 0 0 10px 0 #000; マージン: 自動; オーバーフロー: 非表示; 位置: 相対的; 上マージン: 50px; } #ボックスdiv{ 幅: 50px; 高さ: 50px; 境界線の半径: 50%; 背景色: #fff; 位置: 絶対; } </スタイル> <本文> <div id="ボックス"> <div id="cir"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </本文> <スクリプト> var box = document.getElementById("box"); var cir = document.getElementById("cir") var cirs = box.querySelectorAll("div"); collMove(ボックス、円、6); collMove(ボックス、cirs[1]、7); collMove(ボックス、cirs[2]、8); collMove(ボックス、cirs[3]、9); collMove(ボックス、cirs[4]、10); collMove(ボックス、cirs[5]、10); collMove(ボックス、cirs[6]、11); /** * 要素は境界に遭遇するとポップアップします* ポップアップ中に要素の色を変更します* @param {取得するコンテナー} ボックス * @param {コンテナ内のバウンス要素を取得する} cir * @param {バウンス速度} 速度 */ function collMove(box, cir, speed) { //メソッドのカプセル化 var oDiv = box; //コンテナを取得 var oCir = cir; //コンテナ内の要素を取得 var xMax = oDiv.offsetWidth - oCir.offsetWidth; //コンテナの最大X軸境界 var yMax = oDiv.offsetHeight - oCir.offsetHeight; //コンテナの最大Y軸境界 var motionX = 0; //要素のX軸座標の初期化 var motionY = 0; //要素のY軸座標の初期化 (() => { var speedX = speed; //x軸オフセット var speedY = speed; //y軸オフセット setInterval(() => { motionX += speedX; //X 軸のオフセットを実行しますmotionY += speedY; //y 軸のオフセットを実行しますif (motionX >= xMax) { //X 軸の右境界に当たったかどうかを確認しますmotionX = xMax; //境界に当たった場合は、X 軸の座標を x 軸の右境界の最大値に設定しますspeedX = -speedX; //x 軸のオフセットを反転しますrandColor(oCir); //色を変更します} else if (motionX <= 0) { //X 軸の左境界に当たったかどうかを確認しますmotionX = 0; //境界に当たった場合は、X 軸の座標を 0、つまり左境界の初期位置に設定しますspeedX = -speedX; //X 軸のオフセットを再度反転しますrandColor(oCir); //以下の上限と下限の検出についても同様です} モーションY >= yMaxの場合{ モーションY = yMax; 速度Y = -速度Y randColor(oCir); } それ以外の場合 (motionY <= 0) { モーションY = 0; 速度Y = -速度Y; randColor(oCir); } oCir.style.marginLeft = motionX + "px"; // 要素の X 軸座標を設定します oCir.style.marginTop = motionY + "px"; // 要素の Y 軸座標を設定します }, 10); })(); function randColor(obj) { //ランダムな色をカプセル化し、色を変更して直接呼び出します var op = Math.random() * 7 + 3; 関数 color() { Math.floor(Math.random() * 256) を返します。 } obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})` を返します。 } } </スクリプト> 方法全体の中で最も重要なことは、要素の位置とコンテナの境界の検出と判断を理解することです。この部分を理解すれば、残りは非常に簡単になります。 レンガを投げる: (var i = 1; i<=10; i++){ ボックスを移動します。 } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux で PyCurl のエラーを解決する方法
シミュレーションテーブルとデータスクリプト次の SQL ステートメントをコピーして、sys_dept...
1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...
Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...
その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...
序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...
この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...
このコードは水平マージを示しています。 <!DOCTYPE html PUBLIC "...
コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...
1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...
具体的な方法:まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...
この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...
1. muttをインストールするsudo apt-get install mutt 2. msmtp...