スライド階段効果を実現するjQuery

この記事では、階段スライド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

アイデア：マウスをスクロールするとページがそれに応じて変化し、モジュールをクリックすると正しい場所を指し示す効果が得られます。

コードの実装

1.htmlとcssコード

<html>
 <ヘッド>
  <メタ文字セット="UTF-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   ボディ、ul、li{
    パディング: 0;
    マージン: 0;
   }
   li{
    リストスタイル: なし;
   }
   #フロアナビ{
    表示: なし;
    位置: 固定;
    上: 100px;
    左: 50px;
    幅: 32px;
    境界線: 1px 実線 #CECECE;
   }
   #フロアナビ li{
    位置: 相対的;
    幅: 32px;
    高さ: 32px;
    下境界線: 1px 実線 #CECECE;
    テキスト配置: 中央;
    行の高さ: 32px;
    フォントサイズ: 12px;
   }
   
   #フロアナビスパン{
    表示: なし;
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 32px;
    高さ: 32px;
    背景: 赤;
    色: 白;
   }
   
   #floorNav li:hover span、#floorNav li.hover span{
    表示: ブロック;
   }
   
   #フロアナビゲーション li:最後の子{
    背景: 赤;
    色: 白;
    下部境界線: なし;
   }
   #ヘッダー、#フッター{
    幅: 1000ピクセル;
    高さ: 1000ピクセル;
    背景：ダークゴールデンロッド;
    マージン: 0 自動;
   }
   ＃コンテンツ{
    
   }
   #コンテンツ li{
    幅:1000ピクセル;
    高さ: 600px;
    マージン: 0 自動;
    フォントサイズ: 40px;
    テキスト配置: 中央;
    行の高さ: 600px;
   }
  </スタイル>
 </head>

 <本文>
  <div id="フロアナビ">
   <ul>
    <li>1F<span>衣料品</span></li>
    <li>2F<span>ビューティー</span></li>
    <li>3F<span>携帯電話</span></li>
    <li>4F<span>家電製品</span></li>
    <li>5F<span>デジタル</span></li>
    <li>6F<span>スポーツ</span></li>
    <li>7F<span>ホーム</span></li>
    <li>8F<span>お母さんと赤ちゃん</span></li>
    <li>9F<span>食品</span></li>
    <li>10F<span>書籍</span></li>
    <li>11F<span>サービス</span></li>
    <li>トップ</li>
   </ul>
  </div>
  <div id="ヘッダー"></div>
  <div id="コンテンツ">
   <ul>
    <li style="background: #8B0000;">衣類</li>
    <li style="background: #123;">メイクアップ</li>
    <li style="background: #667;">携帯電話</li>
    <li style="background: #558;">家電製品</li>
    <li style="background: #900;">デジタル</li>
    <li style="background: #456;">スポーツ</li>
    <li style="background: #789;">ホーム</li>
    <li style="background: #234;">母親と赤ちゃん</li>
    <li style="background: #567;">食べ物</li>
    <li style="background: #887;">書籍</li>
    <li style="background: #980;">サービス</li>
   </ul>
 </div>
 <div id="フッター"></div>
</本文>

2. 次に、jQueryファイルをインポートし、jQueryコードを記述します。

<スクリプト>
    $(関数(){

 //判定を定義する var flag = true
 
  $(window).scroll(関数(){

   if(フラグ){
   // 隠れた階段を表示する var scrollTop=$(this).scrollTop();
   スクロールトップ>=500の場合
    $("#floorNav").フェードイン()
   } それ以外{
    $("#floorNav").fadeOut();
   }

   //ヒットする場所を指定する$("#content li").each(function(){
    スクロールトップ>=$(this).offset().top-$(this).outerHeight()/2の場合{
     var インデックス = $(this).index();
     $("#floorNav li").eq(index).addClass("hover")
     .siblings().removeClass("hover")
    }

   })
   }
  })
 
  //クリックすると、スクロールバーが対応する位置までスクロールします$("#floorNav li:not(:last)").click(function(){
   フラグ=偽
   var インデックス = $(this).index();
   $("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
  
   フラグ=true
   $(this).addClass("hover").siblings().removeClass("hover")
  })
 
   $("#floorNav li:last").click(function(){
    フラグ = false;
    $("html,body").animate({"scrollTop":0},200,function(){
     フラグ = true
    })
   })
 })

</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: