• 售前

  • 售后

热门帖子
入门百科

jquery插件实现堆叠式菜单

[复制链接]
DJ牧南 显示全部楼层 发表于 2021-10-26 13:14:47 |阅读模式 打印 上一主题 下一主题
每天一个jquery插件-堆叠式菜单,供大家参考,详细内容如下
堆叠式菜单

一个多页面的特效
结果如下


代码部分
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>堆叠式菜单</title>
  6.   <script src="js/jquery-3.4.1.min.js"></script>
  7.   <style>
  8.    * {
  9.     margin: 0px;
  10.     padding: 0px;
  11.    }
  12.    #boxs {
  13.     position: fixed;
  14.     top: 0px;
  15.     bottom: 0px;
  16.     left: 0px;
  17.     right: 0px;
  18.     background-color: lightgray;
  19.    }
  20.    .box {
  21.     position: absolute;
  22.     top: 0;
  23.     left: 0;
  24.     width: 100%;
  25.     height: 100%;
  26.     padding-top: 10px;
  27.     padding-left: 70px;
  28.     font-weight: bold;
  29.     color: white;
  30.     transition: all 0.5s linear;
  31.    }
  32.    .box1 {
  33.     background-color: #1abc9c;
  34.     z-index: 1;
  35.    }
  36.    .box2 {
  37.     background-color: #2ecc71;
  38.     z-index: 2;
  39.    }
  40.    .box3 {
  41.     background-color: #3498db;
  42.     z-index: 3;
  43.    }
  44.    .box4 {
  45.     background-color: #9b59b6;
  46.     z-index: 4;
  47.    }
  48.    .box5 {
  49.     background-color: #34495e;
  50.     z-index: 5;
  51.    }
  52.    .box6 {
  53.     background-color: #f1c40f;
  54.     z-index: 6;
  55.    }
  56.    #btn {
  57.     color: black;
  58.     z-index: 9;
  59.     position: fixed;
  60.     width: 30px;
  61.     height: 30px;
  62.     /* background-color:lightgray; */
  63.     top: 5px;
  64.     left: 10px;
  65.     font-size: 30px;
  66.     cursor: pointer;
  67.     transition: all 0.3s linear;
  68.     display: flex;
  69.     justify-content: center;
  70.     align-items: center;
  71.    }
  72.    #btn:hover {
  73.     color: white;
  74.     font-weight: bold;
  75.    }
  76.    #btn.check {
  77.     transform: rotate(135deg);
  78.     color: white;
  79.     font-weight: bold;
  80.    }
  81.    .box.check{
  82.     z-index: 99;
  83.    }
  84.    .box span{
  85.     cursor: pointer;
  86.    }
  87.   </style>
  88. </head>
  89. <body>
  90.   <div id="btn">×</div>
  91.   <div id="boxs">
  92.    <div class="box box1" data-index="1"><span>页面1</span></div>
  93.    <div class="box box2" data-index="2"><span>页面2</span></div>
  94.    <div class="box box3" data-index="3"><span>页面3</span></div>
  95.    <div class="box box4" data-index="4"><span>页面4</span></div>
  96.    <div class="box box5" data-index="5"><span>页面5</span></div>
  97.    <div class="box box6" data-index="6"><span>页面6</span></div>
  98.   </div>
  99. </body>
  100. </html>
  101. <script>
  102. $(document).ready(function() {
  103.   $("#btn").click(function() {
  104.    $(this).toggleClass("check");
  105.    if($(this).hasClass('check')){
  106.     $(".box").removeClass('check');
  107.     $(".box").arr().forEach(item=>{
  108.      var index = parseInt(item.attr("data-index"));
  109.      item.css({
  110.       'top':40*index+'px',
  111.       'left':40*index+'px'
  112.      })
  113.     })
  114.    }else{
  115.     $(".box").arr().forEach(item=>{
  116.      var index = parseInt(item.attr("data-index"));
  117.      item.css({
  118.       'top':'0px',
  119.       'left':'0px'
  120.      })
  121.     })
  122.    }
  123.   })
  124.   $(".box span").click(function(){
  125.    $(".box").parent().removeClass('check');
  126.    $(this).parent().addClass('check');
  127.    $("#btn").click();
  128.   })
  129.   $.prototype.arr = function() {
  130.    var that = this;
  131.    var arr = [];
  132.    for (var i = 0; i < that.length; i++) {
  133.     arr.push($(that[i]));
  134.    }
  135.    return arr;
  136.   }
  137. })
  138. </script>
复制代码
思绪表明
布局的结果,很轻易理解
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作