js を使用してウォーターフォール効果を実現する
|
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。
ソースコード:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
ボックスのサイズ: 境界線ボックス;
}
。箱 {
幅: 70ピクセル;
フロート: 左;
左マージン: 4px;
上境界線: 1px 実線 #000;
}
ウル、
オール、
li {
リストスタイルタイプ: なし;
}
li {
幅: 70ピクセル;
表示: ブロック;
テキスト配置: 中央;
}
</スタイル>
</head>
<本文>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<button onclick="reloadPage()">ページを更新</button>
</本文>
</html>
<スクリプト>
var ボックス = document.querySelectorAll(".box");
//最小値を作成します var min = 0;
//カラー配列を作成する var colour = ["red", "yellow", "orange", "blue", "purple", "green", "#cdee", "#feda", "ccc", "#eda", "#639", "#33f", "#f38", "#ca0"]
(j = 1; j <= 50; j++) の場合 {
var lis = document.createElement("li"); // 数字を含む li を作成する
lis.innerHTML = j;
lis.style.height = Math.random() * 40 + 30 + "px"; // ランダムな高さを取得します。最小の高さは 30px です。
lis.style.backgroundColor = colour[parseInt(Math.random() * colour.length-1)]; //ランダムな色を取得する for (var i = 0; i < boxes.length; i++) {
console.log(boxs[i].clientHeight);
// offsetHeightは要素の高さの数値を取得します。if (boxs[i].offsetHeight < boxs[min].offsetHeight) {
min = i; // 高さが最小の配列要素のシーケンス番号を取得します}
}
box[min].appendChild(lis) // 最短のolにliを追加する}
関数 reloadPage() {
location.reload(); // 更新}
</スクリプト>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Tomcat の 404 エラーの解決方法の詳細な説明
推薦する
Linux カーネル デバイス ドライバー アドレス マッピングに関する注意事項
#include <asm/io.h> #define ioremap(cookie,...
Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。
Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...
Linux 仮想メモリ設定のチュートリアルと実践
仮想メモリとは何ですか?まずはWikipediaからの紹介文をそのまま引用します。仮想メモリは、コン...
Linux システムで Tomcat を自動的に起動するための設定方法の紹介
1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...
Elasticsearchツールcerebroのインストールと使用チュートリアル
Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...
Springboot アプリケーションを迅速にデプロイするために Docker とアイデアを統合する詳細なプロセス
目次1. はじめに2. 環境とツール3. Dockerをインストールし、リモート接続を構成する4. ...
Linux NFSメカニズムの動作原理と例の分析
NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...
Vueは移動可能なフローティングボタンを実装します
この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...
CSSでサウンドを再生するいくつかのテクニック
CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れて...
HTML割引価格計算の実装原理とスクリプトコード
コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...
vue-routerのマッチングに基づいてパンくずリスト機能を実現する
この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...
MySQL並列レプリケーションの簡単な説明
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
CSS3 すりガラス効果
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)
目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...
ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード
基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...