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 エラーの解決方法の詳細な説明
推薦する
MySQL でテーブルスペースの断片化を解消する詳細な例
MySQL でテーブルスペースの断片化を解消する詳細な例断片化の原因（1）テーブルのストレージは断片...
初心者向けWebサイト構築ガイド⑥：FlashFXPの詳しい使い方
今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...
docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル
目次DockerのインストールNvidia-docker のインストールDockerのインストール1...
アコーディオン効果を実現するネイティブ js
実際のWebページ開発でも、アコーディオンは頻繁に登場します。簡単なアコーディオンを作ったのですが、...
CentOS 7.x dockerはoverlay2ストレージ方式を使用する
/etc/docker/daemon.json を編集し、以下を追加します。 { "ストレ...
Nginx_geo モジュールを使用して CDN スケジュールを設定する方法
NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...
MySQL オンラインリカバリ UNDO テーブルスペース 実戦記録
1 MySQL5.6 1.1 関連パラメータMySQL 5.6 では、innodb_undo_dir...
MySQL curdate() 関数の詳細な例
MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...
CSS3で実装されたテキストポップアップ効果
成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...
JS 矢印関数に適さないシナリオは何ですか?
目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...
MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...
HTML でマウスが停止したときに行全体の色 (tr) を変更する方法
純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...
MySQL で explain ステートメントを使用する基本的なチュートリアル
目次1. 概要1. 説明文テスト2. 結果の各列の説明2. ID列の説明1. 環境整備2. expl...
VMware Workstation Pro が Windows で実行されない場合の解決策
国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...