アコーディオン効果を実現する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 に設定する方法
推薦する
Windows Server 2012 でファイル サーバーを構築するための詳細な手順
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
Vue でのキープアライブコンポーネントの使用例
問題の説明（キープアライブとは何か）キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...
Mysqlはブール型の演算を設定します
Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...
Win10 システムに MySQL8.0.13 をインストールする際の問題と解決策
オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...
MySQL 5.7.23 解凍バージョンのインストールチュートリアル（画像とテキスト付き）
MySQLインストーラをダウンロードする公式ダウンロードアドレス: http://dev.mysq...
HTML で複数のクラス属性を定義する場合の無効な解決策
HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であ...
MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
Centos7 で NIS を構成する詳細な手順
目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...
Docker 起動時の ES メモリ オーバーフローの解決方法
jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...
Linux netfilter/iptables の知識ポイントの詳細な説明
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための CSS の例コード
今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応さ...
Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました
運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...
マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例
原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...
MySQL マスタースレーブ遅延問題の解決方法
今日は、マスタースレーブ遅延が発生する理由とその対処方法について説明します。しっかり座って出発の準備...
Javascript Echarts 空気質マップ効果の詳細な説明
まず、空気質データと地図データを組み合わせる必要があります。マップデータには属性名があるさまざまな都...