首页
所有分类
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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
使用jquery实现轮播图效果
Jan 02 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) 发烧友(1) 春雷3P7(1) 鉴频器(1) 实习报告(1) AM(1) 原理(1) 电路(15) 单管机(1) 探测器(1)
You might like
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php实现无限级分类
2014/12/24 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python中global与nonlocal比较
2014/11/21 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Phantomjs抓取渲染JS后的网页（Python代码）
2016/05/13 Python
python Celery定时任务的示例
2018/03/13 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Lacoste澳大利亚官网：服装、鞋类及配饰
2018/11/14 全球购物
Linden Leaves官网：新西兰纯净护肤品
2020/12/20 全球购物
2014大四本科生自我鉴定总结
2014/10/04 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
任命书格式模板
2015/09/22 职场文书
你会写报告？产品体验报告到底该怎么写？
2019/08/14 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL