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

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

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

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

>

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


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

🎜>コンピュータデジタル製品

href ="#">ノートブック



• ノートブック1 /li>
  
• ノートブック 1


• ノートブック 1< ;/a>


• ノートブック 1


/li>


• モバイル ハード ドライブ
  
  🎜>
  • モバイル ハード ドライブ 1
  
  
  • モバイル ハード ドライブ 1< ;/ a>
  
  
  • モバイル ハード ドライブ 1
  
  
  • /a>
  
  
  
  
  • ;コンピュータ ソフトウェア
    
    
    
    • コンピュータ ソフトウェア 1< ;/a>
    
    
    • コンピュータ ソフトウェア 1
    
    
    • コンピュータ ソフトウェア 1
    
    
    • コンピュータ ソフトウェア 1
    🎜>
    
    
  
  
  • デジタル製品
    
    
    
    • デジタル製品 1
    
    
    
    
    • デジタル製品 1
    
    デジタル製品 1
    
    
    
    
  
  
  
  
  
  
  
  
  
  コードをコピー
  
  
  コードは次のとおりです:
  
  
  @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.統合効果の実行を示します
  
  見栄えの良い効果を実現するには、原則として同じではなく、いくつかの画像とサンプルを追加する必要があります。的哦

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。