jQuery がアコーディオン メニュー、階層メニュー、トップ メニュー、シームレスなスクロール効果を実装する方法の詳細な例

この記事では主に、jQuery に基づいたアコーディオン メニュー、階層メニュー、トップ メニュー、シームレス スクロール メニューのグラフィックの説明を紹介します。この記事のエフェクト表示とコードの実装については、必要な方は参照してください。 . 皆さんのお役に立てれば幸いです。

1. アコーディオン メニューのレンダリングとコードは次のとおりです:

nbsp;html>


 <meta>
 <title>手风琴效果制作</title>
 <link>
 <style>
  .con{
   width:908px;
   height:300px;
   margin:50px auto;
   overflow: hidden;
   position:relative;
  }
  .con .list_ul{
  }
  .con .list_ul li{
   width:805px;
   height:300px;
   position:absolute;
   background:#fff;
  }
  .con .list_ul li span{
   width:26px;
   height:296px;
   text-align: center;
   color:#fff;
   padding-top:4px;
   float:left;
   cursor: pointer;
  }
  .con .list_ul li img{
   width:777px;
   height:300px;
   float:right;
  }
  .con .list_ul li:after{
   display: table;
   clear:both;
   zoom:1;
   content: &#39;&#39;;
  }
  .con .list_ul li:nth-child(1){
   left:0;
  }
  .con .list_ul li:nth-child(2){
   left:801px;
  }
  .con .list_ul li:nth-child(3){
   left:828px;
  }
  .con .list_ul li:nth-child(4){
   left:855px;
  }
  .con .list_ul li:nth-child(5){
   left:882px;
  }
  .con .list_ul li:nth-child(1) span{
   background: rgba(8, 201, 160, 0.49);
  }
  .con .list_ul li:nth-child(2) span{
   background: rgba(120, 201, 66, 0.97);
  }
  .con .list_ul li:nth-child(3) span{
   background: rgb(77, 114, 201);
  }
  .con .list_ul li:nth-child(4) span{
   background: rgb(255, 179, 18);
  }
  .con .list_ul li:nth-child(5) span{
   background: rgb(201, 5, 166);
  }
 </style>
 <script></script>
 <script>
  $(function(){
   $(".list_li").click(function(){
    //左边
    $(this).animate({left:26*$(this).index()});
    //获取该li元素前面的兄弟元素，实现点击中间的部分，它前面的兄弟元素也跟着一起向左移动
    $(this).prevAll().each(function(){
     $(this).animate({left:26*$(this).index()});
    });
    //右边：获取该li元素后面的兄弟元素，实现点击中间的部分，它后面的兄弟元素也跟着一起向右移动
    $(this).nextAll().each(function(){
     $(this).animate({left:778+26*$(this).index()});
    });
   })
  })
 </script>


 <p>
  </p>

   
•     风景图01         
   
•     风景图02         
   
•     风景图03         
   
•     风景图04         
   
•     风景图05         
  

 

2. スクロールダウン (レベル) メニューのレンダリングとコードは次のとおりです:

nbsp;html>


 <meta>
 <title>用jQuery中的slideToggle制作菜单</title>
 <link>
 <style>
  .menu{
   width:200px;
   margin:10px auto;
  }
  .menu>li{
   background: #8731dd;
   color:#fff;
   text-indent: 16px;
   margin-top:-1px;
   cursor: pointer;
  }
  .menu>li>span{
   padding:10px 0;
   display:block;
   border-bottom: 1px solid #f3f3f3;
  }
  .menuactive,.menu>li>span:hover{
   background:#c7254e;
  }
  .menu > li ul{
   display: none;
  }
  .menu > li ul li{
   text-indent:20px;
   background: #9a9add;
   border:1px solid #f3f3f3;
   margin-top:-1px;
   padding:6px 0;
  }
  .menu >li .active{
   display: block;

  }
  .menu > li ul li:hover{
   background:#67C962;
  }
  .menu_li ul{
   margin-bottom:1px;
  }
 </style>
 <script></script>
 <script>
  $(function () {
   $(".menu_li>span").click(function(){
    $(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive");
    $(this).next("ul").slideToggle();
    $(this).parent().siblings().children("ul").slideUp();
   })
  })
 </script>

 
•   水果系列   
     
  • 苹果
     
  • 梨子
     
  • 葡萄
     
  • 火龙果
    
   
 
•   海鲜系列   
     
  • 鱼
     
  • 大虾
     
  • 螃蟹
     
  • 海带
    
   
 
•   果蔬系列   
     
  • 茄子
     
  • 黄瓜
     
  • 豆角
     
  • 西红柿
    
   
 
•   速冻食品   
     
  • 水饺
     
  • 冰淇淋
    
   
 
•   肉质系列   
     
  • 猪肉
     
  • 羊肉
     
  • 牛肉
    
   

3. トップ メニュー (メニューがページに到達します。上部に表示されたら、そこで停止します)

 nbsp;html>


 <meta>
 <title>置顶菜单</title>
 <link>
 <style>
  .header{
   width:960px;
   height:200px;
   margin:0 auto;
   background: #ccc;
  }
  .header img{
   width:100%;
   height:200px;
  }
  .ul_list{
   width:960px;
   height:50px;
   margin:0 auto;
   text-align: center;
   display: flex;
   justify-content: space-between;/*实现子元素水平方向上平分*/
   align-items: center;/*使子元素垂直方向上居中*/
   background: #67C962;
  }
  .ul_list li{
   width:160px;
   height:50px;
   line-height: 50px;
   border:1px solid #ccc;
   /*使边框合并*/
   margin-right:-1px;
  }
  .ul_list li a{
   color:#fff;
  }
  .ul_list li:hover{
   background: #c7254e;
  }
  .ul_fixed{
   position: fixed;
   top:0;
  }
  .menu_pos{
   width:960px;
   height:50px;
   margin:0 auto;
   line-height: 50px;
   display: none;
  }
  .con p{
   width:958px;
   height:300px;
   line-height: 300px;
   text-align: center;
   margin:-1px auto 0;
   border: 1px solid #ccc;
  }
  .footer{
   height:300px;
  }
  .top{
   width:38px;
   height:38px;
   border-radius: 35px;
   background: #000;
   color:#fff;
   font-size:13px;
   padding:8px;
   text-align: center;
   position: fixed;
   right:100px;
   bottom:20px;
   display: none;
  }
  .top:hover{
   cursor: pointer;
  }
 </style>
 <script></script>
 <script>
  $(function(){
   var oLeft = ($(document).outerWidth(true)-$(".header").outerWidth())/2;
   var oTop = $(".top");
   $(window).scroll(function(){
    if($(window).scrollTop() >= $(".header").outerHeight()){
     $(".ul_list").addClass("ul_fixed").css({left:oLeft});
     $(".menu_pos").show();
    }else{
     $(".ul_list").removeClass("ul_fixed");
     $(".menu_pos").hide();
    }
    if($(window).scrollTop() >= 150){
     oTop.fadeIn();
     oTop.click(function(){
      //第一种回到顶部的方式
      //$(window).scrollTop(0);
      //第二种回到顶部的方式(常用)
      $("html,body").animate({scrollTop:0});
     })
    }else{
     oTop.fadeOut();
    }
   });
  })
 </script>


 <p>
  <img  src="/static/imghwm/default1.png" data-src="../images/li02.png" class="lazy" alt="jQuery がアコーディオン メニュー、階層メニュー、トップ メニュー、シームレスなスクロール効果を実装する方法の詳細な例" >
 </p>
 

  
• 首页
  
• 新闻动态
  
• 产品展示
  
• 案例分析
  
• 关注我们
  
• 联系我们
 

 

 

  

网站主内容一

  

网站主内容二

  

网站主内容三一

   

 

回到顶部

4. シームレスなスクロール効果の図とコードは次のとおりです:

nbsp;html>


 <meta>
 <title>无缝滚动</title>
 <link>
 <style>
  .con{
   width:662px;
   margin:50px auto;
  }
  .con button{
   width:100px;
   height:36px;
   line-height: 36px;
   text-align: center;
   border: none;
   margin-left:20px;
  }
  .box{
   width:655px;
   height:135px;
   margin:20px auto;
   border:1px solid #ccc;
   padding-left:10px;
   padding-bottom:10px;
   position: relative;
   overflow: hidden;
  }
  .ul_list{
   display: flex;
   position: absolute;
   left:0;
   top:0;
   padding: 10px;
  }
  .ul_list li{
   width:120px;
   height:120px;
   border:1px solid #ccc;
   margin-left:-1px;
   margin-right:10px;
   /*margin-top:10px;*/
  }
  .ul_list li img{
   width:100%;
   height:100px;
   line-height: 100px;
  }
 </style>
 <script></script>
 <script>
  $(function(){
   var oUl = $(".ul_list");
   var oLeft = $(".left");
   var oRight = $(".right");
   var left = 0;
   var delay = 2;
   oUl.html(oUl.html()+oUl.html());
   function move(){
    left-=delay;
    if(left<-667){
     left = 0;
    }
    if(left>0){
     left = -667;
    }
    oUl.css({left:left});
   }
   var timer =setInterval(move,30);
   oLeft.click(function(){
    delay =2;
   });
   oRight.click(function(){
    delay = -2;
   });
   oUl.children().each(function(){
    oUl.eq($(this).index()).mouseover(function(){
     clearInterval(timer);
    });
    oUl.eq($(this).index()).mouseout(function(){
     timer= setInterval(function(){
      left-=delay;
      if(left<-667){
       left = 0;
      }
      if(left>0){
       left = -667;
      }
      oUl.css({left:left});
     },30);
    })
   })
  })
 </script>


<p>
 <button>向左</button>
 <button>向右</button>
 </p><p>
  </p>

   
• 
   
• 
   
• 
   
• 
   
• 
  

 

上記のメニューに関連する知識ポイントは次のとおりです:

4. jQuery

1. slideDown() 下方向に表示

3. slideToggle() 要素を順番に展開またはロールアップします

5. jQuery チェーン呼び出し

jquery オブジェクト このメソッドは実行後にこの jquery オブジェクトを返します。すべての jQuery オブジェクト メソッドは一緒に記述することができます:

rree $("#p1").//ID ビット p1 を持つ要素

.chlidren(" ul") //この要素の下にあるulの子要素

.slideDown("fast") //ul要素の高さを0から実際の高さまで表示します

.parent() //親要素にジャンプul の、つまり ID は p1 要素です

.siblings() //p1 要素の同じレベルにあるすべての兄弟要素にジャンプします

.chlidren("ul") //次の ul サブ要素を検索しますこれらの兄弟要素

.slideUp("fase") / /ul 要素を非表示にするために実際の高さをゼロに変換します

関連する推奨事項:

jquery はドロップダウン メニューのアコーディオン効果の共有を実装します

共有例jQuery はマルチレベルのメニュー効果を実装します

jQuery メニューのすべての選択、選択の反転、インスタンス解析のキャンセル

以上がjQuery がアコーディオン メニュー、階層メニュー、トップ メニュー、シームレスなスクロール効果を実装する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。