アコーディオン効果を実現する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 に設定する方法
推薦する
MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)
この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...
WeChatアプレットでグローバル変数を監視する方法
最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...
forループ内のvarの問題の解決
序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...
CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
CentOS 7 で MySQL 8 の複数のインスタンスを設定する詳細なチュートリアル (必要な数だけ設定できます)
原因最近、プロジェクトのリファクタリングを始めたのですが、マスタースレーブと読み取り書き込み分離を使...
Vue.js ディレクティブのカスタム命令の詳細な説明
デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...
jQueryはマウスドラッグ画像機能を実装します
この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...
CentOS で MySQL 5.1 を 5.5.36 にアップグレードする
CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...
vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
Dockerイメージをプルしてバージョンを確認する方法
イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...
MySQL-8.0.26 構成グラフィックチュートリアル
はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...
MySQL で中国語の文字をピンインでソートする簡単な例
名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...
Vue で $attrs と $listeners を使用するチュートリアル
目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...
WeChat公式アカウントでReactプロジェクトを実行する方法
目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...