首页
所有分类
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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery remove()过滤被删除的元素（推荐）
Jul 18 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
Oct 26 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) IDEA(2) android studio(3) OpenLayer(1) 二维数组(2) 多维数组(1) 循环(3) 移动开发(2) 分块(1) 安卓(1)
You might like
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
Jquery 扩展方法
2010/05/06 Javascript
关于js类的定义
2011/06/28 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
在vue-cli中组件通信的方法
2017/12/16 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python动态视频下载器的实现方法
2019/09/16 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Liu Jo西班牙官网：意大利服装品牌
2019/09/11 全球购物
医学生求职信
2014/07/01 职场文书
个人查摆剖析材料
2014/10/04 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
三方合作意向书范本
2015/05/09 职场文书
李强优秀员工观后感
2015/06/16 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers