【jQuery案例】手风琴

jQuery
551
0
0
2022-12-18
JQuery 实现开发常用功能
上一篇
【jQuery动画】停止动画、淡入淡出、自定义动画
下一篇

img

🙋‍ 哈喽大家好，本次是jQuery案例练习系列第五期 ⭐本期是jQuery案例——手风琴 🏆系列专栏：jQuery笔记 😄笔者还是前端的菜鸟，还请大家多多指教呀~ 👍欢迎大佬指正，一起学习，一起加油！

文章目录

  • 案例展示
  • 案例分析
  • 案例实现
  • HTML
  • CSS
  • jQuery
  • 方法一
  • 方法二
  • 总结

案例展示

https://live.csdn.net/v/embed/244227

哈喽大家好，本次案例将会实现一个简单的手风琴效果，当鼠标指针滑过方块时，当前方块状态会发生变化👇

手风琴案例

案例分析

手风琴效果的实现并不复杂，需要用到jQuery中的fadeIn()和fadeOut()方法，以及鼠标指针进入事件mouseenter，下面我们来对本次案例的实现思路进行分析👇 1、编写手风琴效果的页面结构。案例包含小方块、大方块和滑动的效果，所以我们需要设置小方块的大小和变成大方块后的大小等。 2、为不同的方块设置不同的背景颜色。为了美观和更好的展示效果，大方块的背景颜色采用了接近于小方块的背景颜色。 3、通过jQuery实现交互效果。当鼠标指针移动到小方块时，触发鼠标指针移入事件。利用选择器获取到页面中的小方块时，通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。

案例实现

HTML

页面结构主要使用div、ul、li标签。 思路： 1、设置一个div，类名为king，用于存放方块。 2、设置方块结构，使用ul定义无序列表结构，使用li代表小方块结构。li的类名为current，表示初始状态。 3、在li标签内部定义两个div元素，类名分别为big和small。big表示大方块，small表示小方块。 4、通过颜色类名red1和red2等方式设置大小方块的颜色。

  <body> 
    <div class="king"> 
      <ul> 
        <li class="current"> 
          <div class="small red1"></div> 
          <div class="big red2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small orange1"></div> 
          <div class="big orange2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small yellow1"></div> 
          <div class="big yellow2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small green1"></div> 
          <div class="big green2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small ching1"></div> 
          <div class="big ching2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small blue1"></div> 
          <div class="big blue2"></div> 
        </li>
 
        <li class="current"> 
          <div class="small purple1"></div> 
          <div class="big purple2"></div> 
        </li> 
      </ul> 
    </div> 
  </body>

CSS

思路： 1、清除元素的默认样式。有些标签会带有默认样式，清除样式也方便我们后续设置css样式。 2、设置最外层盒子的样式。最外层盒子也就是类名为king的元素，设置它的大小，背景颜色，边距，使其居中显示，隐藏超出盒子的部分。 3、设置大小方块的背景色。 4、取消列表ul的默认样式。 5、设置列表的样式，设置列表的大小，边距等。这里使用position：relative设置相对定位。position：relative是基于该元素本身原来的位置来定位，当它进行位置移动时，它还是占用着原来的位置。 6、设置初始状态。 7、设置大方块样式，使用display：none；隐藏方块，设置大方块的大小，圆角边框。 8、设置小方块的样式，设置小方块的大小、边距、圆角边框。使用position：absolute；使元素脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位时，会当作脱离文档流的元素不存在而进行定位。

<style> 
      /* 清除元素的margin和padding */
      * {
        margin: 0;
        padding: 0;
      }
 
      /* 设置最外层盒子的样式 */
      .king {
        width: 710px;
        margin: 100px auto;
        background: rgb(187, 183, 183);
        /* 超出盒子部分隐藏 */ 
        overflow: hidden;
        padding: 10px;
      }
      /* 取消列表的默认样式 */
      .king ul {
        list-style: none;
      }
      /* 设置列表样式 */
      .king li {
        position: relative;
        width: 69px;
        height: 69px;
        margin-right: 5px;
        margin-left: 5px;
      }
      /* 设置初始状态 */
      .king li.current {
        width: 110px;
        float: left;
      }
      .king li.small {
        display: none;
      }
      .king li.big {
        display: block;
      }
      /* 设置大方块样式 */
      .big {
        width: 224px;
        height: 69px;
        display: none;
        border-radius: 5px;
      }
      /* 设置小方块样式 */
      .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
      }
      /* 设置大小方块背景色 */
      .red1 {
        background-color: red;
      }
      .red2 {
        background-color: rgb(248, 97, 97);
      }
      .orange1 {
        background-color: orange;
      }
      .orange2 {
        background-color: rgb(250, 202, 113);
      }
      .yellow1 {
        background-color: yellow;
      }
      .yellow2 {
        background-color: rgb(248, 248, 103);
      }
      .green1 {
        background-color: green;
      }
      .green2 {
        background-color: rgb(21, 209, 21);
      }
      .ching1 {
        background-color: greenyellow;
      }
      .ching2 {
        background-color: rgb(198, 250, 120);
      }
      .blue1 {
        background-color: blue;
      }
      .blue2 {
        background-color: rgb(154, 154, 242);
      }
      .purple1 {
        background-color: purple;
      }
      .purple2 {
        background-color: rgb(218, 17, 218);
      }
    </style>

jQuery

jQuery部分有两种方法，一起看看吧~ 首先，最重要的一步是引入jQuery👇

img

方法一

思路： 1、获取类名为king元素下的li，并且绑定鼠标指针移入事件。 2、找到当前元素，调用stop()用来停止当前正在进行的动画，通过调用animate()方法，让宽度过渡到224px。 3、找到小方块，实现淡出效果。 4、获取小方块的兄弟元素，类名为big的大方块，实现淡入效果。 5、清除当前元素的其他兄弟元素，大方块变小方块。 6、实现小方块淡入效果。 7、实现大方块淡出效果。

  <script>
      $(document).ready(function () {
         // 1、获取king元素下的li，绑定鼠标指针移入事件
        $(".king li").mouseenter(function () {
          // 2、找到当前元素，停止当前正在进行的动画，使宽度过渡到224px 
         var interim = $(this).stop().animate({
            width: 224,
          });
          // 3、找到小方块，实现淡出效果 
         var fade_square1= interim.find(".small").stop().fadeOut();
          // 4、获取小方块的兄弟元素，实现淡入效果
          fade_square1.siblings(".big").stop().fadeIn();
          // 5、清除当前元素的其他兄弟元素的状态，大方块变小方块 
         var interim2 = $(this).siblings("li").stop().animate({
            width: 69,
          });
          // 6、小方块淡入 
          var fade_square2=interim2.find(".small").stop().fadeIn();
        //   7、兄弟节点，大方块淡出
            fade_square2.siblings(".big").stop().fadeOut();
        });
      });
    </script>

方法二

方法二是使用链式编程来达到效果，整体思路和方法一类似，就不多赘述啦~

  <script>
      $(document).ready(function () {
            $(".king li").mouseenter(function(){
                $(this).stop().animate({
                    width:224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
 
                $(this).siblings("li").stop().animate({
                    width:69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
        });
      });
    </script>

总结

以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏，持续更新呢~ 咱们下期再见~

JQuery 实现开发常用功能
上一篇
【jQuery动画】停止动画、淡入淡出、自定义动画
下一篇