この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 jQuery エフェクトを使用します (次のように機能します)。 コード(チェーンプログラミング): <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <script src="../jquery-3.4.1.min.js"></script> <スタイル タイプ="text/css"> * { マージン: 0; パディング: 0; } 画像 { 表示: ブロック; } ul { リストスタイル: なし; } 。王 { 幅: 852ピクセル; マージン: 100px 自動; 背景: url(../images/bg.png) 繰り返しなし; オーバーフロー: 非表示; パディング: 10px; } .キングul{ オーバーフロー: 非表示; } .キング・リー{ 位置: 相対的; フロート: 左; 幅: 69px; 高さ: 69px; 右マージン: 10px; } .king li.current { 幅: 224ピクセル; } .king li.current .big { 表示: ブロック; } .king li.current .small { 表示: なし; } 。大きい { 幅: 224ピクセル; 表示: なし; } 。小さい { 位置: 絶対; 上: 0; 左: 0; 幅: 69px; 高さ: 69px; 境界線の半径: 5px; } </スタイル> </head> <本文> <div class="キング"> <ul> <li class="current"> <a href="#" > <img src="../images/m1.jpg" alt="" class="small"> <img src="../images/m.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/l1.jpg" alt="" class="small"> <img src="../images/l.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/c1.jpg" alt="" class="small"> <img src="../images/c.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/w1.jpg" alt="" class="small"> <img src="../images/w.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/z1.jpg" alt="" class="small"> <img src="../images/z.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/h1.jpg" alt="" class="small"> <img src="../images/h.png" alt="" class="big"> </a> </li> <li> <a href="#" > <img src="../images/t1.jpg" alt="" class="small"> <img src="../images/t.png" alt="" class="big"> </a> </li> </ul> </div> </本文> <スクリプト> $(関数() { //1. マウスが小さい li の上を通過すると、2 つのステップがあります。現在の小さい li の幅が 225px になり、内部の小さい画像がフェードアウトし、大きい画像がフェードインします。 //2. 残りの兄弟要素である小さい li の幅が 69px になり、小さい画像がフェードインし、大きい画像がフェードアウトします。 $(".king li").mouseenter(function() { $(this).stop().animate({ 幅: 224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); $(this).siblings("li").stop().animate({ 幅: 69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }) }) </スクリプト> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: iviewは動的なフォームとカスタム検証期間の重複を実装します
>>: jQueryはショッピングカートの完全な機能を実現します
SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...
この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...
これは主に、場所パラメータのif判断の設定ジャンプです。迂回により、サーバーの負荷と圧力を軽減できま...
ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...
方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...
Tensorflow バージョンと Cuda および CUDNN の対応: https://tens...
目次環境説明Windows 10 に Docker for Windows をインストールするWin...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...
MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...
この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...
今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...
この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...