首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJuly 20, 2017

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

基于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实现手风琴菜单、层级菜单、置顶菜单、无缝滚动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

小君君的博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
逻辑架构(1) ipv6(1) 事务(5) 性能优化(3) 弱口令(1) offset(1) 缓存(3) 策略(1) 内存(1) 锁(1)
You might like
《被神捡到的男人》动画化计划进行中！
2020/03/06 日漫
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Django中的ajax请求
2018/10/19 Python
Python最小二乘法矩阵
2019/01/02 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
python中tab键是什么意思
2020/06/18 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
医学毕业生自我鉴定
2013/10/30 职场文书
心理健康教育心得体会
2013/12/29 职场文书
实习生的自我评价
2014/01/08 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2014年司法所工作总结
2014/11/22 职场文书
无保留意见审计报告
2015/06/05 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Python 图片添加美颜效果
2022/04/28 Python