Jquery——手风琴效果+表格全选

最新推荐文章于 2022-11-28 10:26:52 发布

Zjaun

最新推荐文章于 2022-11-28 10:26:52 发布

阅读量628

点赞数 1

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87216065

版权

本文介绍了使用Jquery创建手风琴效果的步骤，包括手风琴样式与控件的详细设置，如css和body的样式调整，以及相关函数的编写。此外，还讲解了如何实现表格的全选功能，并提供了判断全选状态的方法。通过实例展示了两种手风琴效果的运用，帮助读者深入理解Jquery在交互设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手风琴样式与控件1

<style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      width: 1300px;
    }

    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }

    #box li {
      width: 240px;
      height: 400px;
      /*border: 1px solid #000;*/
      float: left;
    }
  </style>
  
<div id="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

脚本

<script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      var $li = $("#box li");
      for (var i = 0; i < $li.length; i++) {
        $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
      }
      //给所有的li注册鼠标经过事件
      $li.mouseenter(function () {
        $(this).stop().animate({
          width: 800
        }).siblings().stop().animate({
          width: 100
        });
      }).mouseleave(function () {
        $li.stop().animate({
          width: 240
        });
      });
    });
  </script>

在这里插入图片描述

手风琴样式与控件2

css + body

<style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    .parentWrap {
      width: 200px;
      text-align: center;
    }

    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }

    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      border-b

最低0.47元/天解锁文章