首页
所有分类
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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
S500(1) PL990(2) S400(1) S700(1) 山进(2) ICF-SW07(1) Grundig(1) D1875(1) ATS-909X(1) SANGEAN(1)
You might like
逆序二维数组插入一元素的php代码
2012/06/08 PHP
php生成随机密码自定义函数代码（简单快速）
2014/05/10 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器
2010/10/11 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
python根据日期返回星期几的方法
2015/07/06 Python
目前最全的python的就业方向
2018/06/05 Python
python http基本验证方法
2018/12/26 Python
Python List cmp()知识点总结
2019/02/18 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django模板语言 Tags使用详解
2019/09/09 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Lime Crime官网：美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
写求职信有什么意义
2014/02/17 职场文书
会计员岗位职责
2014/03/15 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
政风行风建设责任书
2014/07/23 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
教师节校长致辞
2015/07/31 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
高端收音机+蓝牙音箱，JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电