コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery はカスケード メニュー効果を実装します (淘宝網ホームページのメニュー アニメーションの模倣)_jquery

WBOY
リリース： 2016-05-16 16:52:42
オリジナル
1215 人が閲覧しました

HTM DIV CSSl を初めて使用する学生も、淘宝網のホームページ用のメニュー アニメーションを作成したいと思うと思います。今回はカスケードメニューを表示する方法を紹介します。エディターは単純な効果を実現しただけですが、全体的な原理は同じなので、まずレンダリングを皆さんに見てもらいましょう。

この効果を実現するには、もちろん jQuery を使用する必要があります。次にその方法を説明します。最初に HTML と CSS コード

コードをコピーします コードは次のとおりです。




>menu.html

description" content ="これは私のページです">


< link rel= "stylesheet" type="text/css" href="../css/menu.css">







    🎜>コンピュータデジタル製品
      href ="#">ノートブック
      /li>

    • モバイル ハード ドライブ
        🎜>
      • モバイル ハード ドライブ 1

      • モバイル ハード ドライブ 1< ;/ a>

      • モバイル ハード ドライブ 1

      • /a>



      • ;コンピュータ ソフトウェア


      • デジタル製品









        • コードをコピー


        コードは次のとおりです:

        @CHARSET "UTF-8";

        *{
        マージン: 0px;
        パディング: 0px;

        }

        ul,li{
        list-style-type: none;

        }

        .menu{
        幅: 190px;
        境界線: 1 ピクセルの赤い実線。
        背景色: #fffdd2;
        }

        .optn{
        幅: 190px;
        行の高さ: 28px;
        border-top: 1 ピクセルの赤い破線。

        }


        .content{
        padding-top:10px;
        クリア: 左;
        }


        a{
        テキスト装飾: なし;
        カラー: #666;
        パディング: 10px;
        }
        .optnFocus{
        背景色: #fff;
        フォントの太さ: 太字;

        }

        div{
        パディング: 10px;
        }

        .tip{
        幅: 190px;
        ボーダー: 2 ピクセルの赤い実線。
        位置: 絶対。
        背景色: #fff;
        表示: なし。
        }

        .tip li{
        line-height: 23px;
        }

        次来就是主要的jquery代码:menu.js
        复制代码代次如下:

        $(function(){

        var curY;//获取所選択のTOP
        var curH;//获取所選択の高さ
        var curW;//取るべき幅
        var objL;//取当前オブジェクト

        //取当前位置に使用される独自関数数
        function setInitValue(obj){
        curY=obj.offset().top;
        curH=obj.height();
        }

        //设前所项的ネズミ标滑動イベント
        $(".optn").mouseover(function(){
        objL=$(this);//获取当前对オブジェクト
        setInitValue(objL);
        var allY=curY- curH "px";

        objL.addClass("optnFocus");
        //获取气元素の下一个ul
        $(".tip",this).show()。 css({"top":allY,"left":curW});;

        });
        $(".optn").mouseout(function(){

        $(this).removeClass("optnFocus");
        $(".tip",this).hide();

        //のため子菜单時子菜单不见，我们也要子菜单設置鼠标イベント

        $(".tip").mouseover(function(){

        $(this).show() ;
        objL=$(this).prev("li");
        setInitValue("optnFocus"); $(".tip").mouseout(function(){
        $(this).hide();
        $(this).prev("li").removeClass("optnFocus");

        })
        });


        注意要点:

        1. 私が使用しているのはより高いバージョンの jquery 文書であるため、一部のメソッドはサポートされていません (例: 次の要素の最初の部分)子元素next(erp)、10.1ではサポートされていないため、私はある方法を変更しました$(chiled,select)、selectの範囲で実行元素の選択

        2.統合効果の実行を示します
        見栄えの良い効果を実現するには、原則として同じではなく、いくつかの画像とサンプルを追加する必要があります。的哦
関連ラベル：
カスケードメニュー
ソース：php.cn
前の記事：jQueryは、マウスがpicture_jqueryの上を通過すると大きな画像プレビューの効果を実現します 次の記事：ウォーターフォールフローレイアウトの例 code_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
JavaScript 関数はボタンのクリックには影響しません インターネットを検索して多くのことを試しましたが、比較的単純な問題で立ち往生しています。以下のコードは私の質問の全範囲です <script> //最終的に行全体を別のテ...
から 2024-04-05 13:14:53
0
2
1433
ナビゲーションバーの中央のドロップダウンメニュー このCSS/HTMLを作りました。 .navbar{幅:100%;背景色:rgb(151,44,44);オーバーフロー:自動;}.navbara{border-right:1pxs...
から 2024-04-04 18:24:52
0
1
338
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート