欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

程序员文章站 2023-02-24 09:16:26
一、手风琴菜单效果图及代码如下： ...

一、手风琴菜单效果图及代码如下：

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>手风琴效果制作</title>
 <link rel="stylesheet" href="../css/reset.css">
 <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: '';
  }
  .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 src="../js/jquery-1.12.4.min.js"></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>
</head>
<body>
 <div class="con">
  <ul class="list_ul">
   <li class="list_li">
    <span>风景图01</span>
    <img src="../images/li01.png" alt="风景图01">
   </li>
   <li class="list_li">
    <span>风景图02</span>
    <img src="../images/li02.png" alt="风景图02">
   </li>
   <li class="list_li">
    <span>风景图03</span>
    <img src="../images/li03.png" alt="风景图03">
   </li>
   <li class="list_li">
    <span>风景图04</span>
    <img src="../images/li04.png" alt="风景图04">
   </li>
   <li class="list_li">
    <span>风景图05</span>
    <img src="../images/li05.png" alt="风景图05">
   </li>
  </ul>
 </div>
</body>
</html>

二、上卷下拉式（层级）菜单效果图和代码如下：

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>用jquery中的slidetoggle制作菜单</title>
 <link rel="stylesheet" href="../css/reset.css">
 <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 src="../js/jquery-1.12.4.min.js"></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>
</head>
<body>
<ul class="menu" id="menu">
 <li class="menu_li">
  <span class="menuactive">水果系列</span>
  <ul class="active">
   <li>苹果</li>
   <li>梨子</li>
   <li>葡萄</li>
   <li>火龙果</li>
  </ul>
 </li>
 <li class="menu_li">
  <span>海鲜系列</span>
  <ul>
   <li>鱼</li>
   <li>大虾</li>
   <li>螃蟹</li>
   <li>海带</li>
  </ul>
 </li>
 <li class="menu_li">
  <span>果蔬系列</span>
  <ul>
   <li>茄子</li>
   <li>黄瓜</li>
   <li>豆角</li>
   <li>西红柿</li>
  </ul>
 </li>
 <li class="menu_li">
  <span>速冻食品</span>
  <ul>
   <li>水饺</li>
   <li>冰淇淋</li>
  </ul>
 </li>
 <li class="menu_li">
  <span>肉质系列</span>
  <ul>
   <li>猪肉</li>
   <li>羊肉</li>
   <li>牛肉</li>
  </ul>
 </li>
</ul>
</body>
</html>

三、置顶菜单（当一个菜单到达页面顶部时，停在那）

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

 <!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>置顶菜单</title>
 <link rel="stylesheet" href="../css/reset.css" rel="external nofollow" >
 <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 div{
   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 src="../js/jquery-1.12.4.min.js"></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>
</head>
<body>
 <div class="header">
  <img src="../images/li02.png" alt="banner图">
 </div>
 <ul class="ul_list">
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻动态</a></li>
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >产品展示</a></li>
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例分析</a></li>
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关注我们</a></li>
  <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li>
 </ul>
 <div class="menu_pos"></div>
 <div class="con">
  <div class="con_header">网站主内容一</div>
  <div class="con_center">网站主内容二</div>
  <div class="con_footer">网站主内容三一</div>
 </div>
 <div class="footer"></div>
 <div class="top">回到顶部</div>
</body>
</html>

四、无缝滚动效果图及代码如下：

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>无缝滚动</title>
 <link rel="stylesheet" href="../css/reset.css">
 <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 src="../js/jquery-1.12.4.min.js"></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>
</head>
<body>
<div class="con">
 <button class="left">向左</button>
 <button class="right">向右</button>
 <div class="box clearfix">
  <ul class="ul_list">
   <li><img src="../images/furit_03.jpg" alt="第一张图片"></li>
   <li><img src="../images/goods_08.jpg" alt="第二张图片"></li>
   <li><img src="../images/furit_02.jpg" alt="第三张图片"></li>
   <li><img src="../images/goods_05.jpg" alt="第四张图片"></li>
   <li><img src="../images/furit_04.jpg" alt="第五张图片"></li>
  </ul>
 </div>
</div>
</body>
</html>

以上菜单涉及到的知识点如下：

四、jquery

1、slidedown（）向下展示

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

2、slideup（）向上卷起

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

3、slidetoggle（）依次展开或卷起某个元素

基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

 五、jquery链式调用

jquery对象的方法在执行完之后返回这个jquery对象，所有的jquery对象的方法可以连起来写：

$("#div1").chlidren("ul").slidedown("fast").parent().siblings().chlidren("ul").slideup("fase")

 $("#div1").//id位div1的元素

.chlidren("ul")  //该元素下的ul子元素

.slidedown("fast")   //高度从零到实际高度来显示ul元素

.parent()   //跳转到ul的父元素，也就是id为div1的元素

.siblings()  //跳转div1元素同级的所有兄弟元素

.chlidren("ul")   //查找这些兄弟元素中的ul子元素

.slideup("fase")   //从实际高度变换为零来隐藏ul元素

总结

以上所述是小编给大家介绍的基于jquery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动，希望对大家有所帮助

上一篇： js+html5实现半透明遮罩层弹框效果

下一篇： Vue之Watcher源码解析（1）

推荐阅读