アコーディオン効果を実現するJavaScript
|
この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
ul {
幅: 100%;
テキスト配置: 中央;
}
ul li {
リストスタイル: なし;
オーバーフロー: 非表示;
表示: インラインブロック;
遷移: すべて 1;
}
</スタイル>
</head>
<本文>
<ul>
</ul>
<スクリプト>
var ul = document.querySelector("ul");
var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];
(var i = 0; i < imgs.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img");
img.src = imgs[i];
li.appendChild(画像);
ul.appendChild(li);
}
var lis = document.querySelectorAll("li");
window.onload = window.onresize = 関数() {
(var i = 0; i < lis.length; i++) の場合 {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
var imgM = document.querySelectorAll("img");
(i = 0; i < imgM.length; i++) の場合 {
imgM[i].onmouseenter = 関数() {
(var j = 0; j < imgM.length; j++) の場合 {
lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
}
lis[i].style.width = imgM[i].offsetWidth + "px";
}
imgM[i].onmouseleave = 関数() {
(var i = 0; i < lis.length; i++) の場合 {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法
推薦する
ウェブページ作成によく使われる英語フォント
アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...
HTML テーブル データを Json 形式に変換するサンプル コード
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...
MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費
目次1. 背景2. テーブル作成ステートメントとデータ挿入テーブルを作成するデータの挿入3. ウィン...
Node.js で MySQL データベースにバッチデータを挿入する方法
プロジェクト（nodejs）では、一度に複数のデータをデータベースに挿入する必要があります。データベ...
Nginx は https ウェブサイト構成コード例を実装します
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
Vueでクラススタイルを使用する方法の詳細
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
ルートパスワードを変更するための MySQL 設定、MySQL サーバー接続、MySQL 共通コマンド図
1. ルートパスワードの設定と変更mysql が起動しているかどうかを確認します。起動していない場合...
HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN
水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...
Linux で MySQL のルート パスワードを変更する方法
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
ネガティブマージン関数の紹介と使用方法の概要
1998 年の CSS2 勧告の時点で、テーブルは徐々に舞台から消え、歴史の中に記録されるようになり...
Ubuntu 20.04 中国語入力方法のインストール手順
この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...
ReactでuseStateを使用する詳細な例
使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...
MySQLトランザクション処理の使用方法とサンプルコードの詳細な説明
MySQL トランザクション サポートは、MySQL サーバー自体にバインドされているのではなく、ス...
MySQL 5.7.33 インストール プロセスの詳細な図解
目次インストールパッケージのダウンロードインストール環境変数の設定インストールが成功したか確認する記...
フレックスレイアウトは、1行あたりの固定行数と適応レイアウトを実現します。
この記事では、1行あたりの固定行数+アダプティブレイアウトを実現するフレックスレイアウトを紹介し、皆...