アコーディオン効果を実現する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 に設定する方法
推薦する
NetEase ブログで使用されているシンプルな Web ページ コード
NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...
17の広告効果測定の解釈
1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...
Nest.js 認証検証方法の例
目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...
MySQL 5.7 でパスワードを変更する簡単な方法
これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...
JavaScript を使用してページに動的な検証コードを実装する例
導入：現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...
MySQL InnoDBセカンダリインデックスのソート例の詳細な説明
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
よく使われるn番目の子セレクターをまとめる
序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...
HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法
Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...
SQLインジェクションの詳しい解説 - セキュリティ編（第2部）
この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...
MySQLの文字タイプは大文字と小文字を区別します
デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...
純粋な CSS3 でペットの鶏のサンプルコードを実現
最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...
Flash での HTML と CSS の適用
Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...
TypeScript 2.0 マーク付き共用体型の詳細な説明
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
Linux7 ベースの Hadoop のインストールと構成の詳細なグラフィック説明
上記のように材料を準備します（ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...
Element+vueを使用して開始時間と終了時間の制限を実装する
この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...