この記事では、アコーディオンを実装するための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はショッピングカートの完全な機能を実現します
プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...
Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...
インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...
序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...
接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...
目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...
<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...
目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...
Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...
MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...
環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....