千峰jquery【案例】

最新推荐文章于 2024-11-08 14:35:14 发布

赤焰梦

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量934

点赞数

分类专栏： HTML/CSS/Javascript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_49442965/article/details/129036420

版权

本文详细介绍了使用jQuery实现的各种交互效果，包括滑动选项卡、手风琴效果、鼠标跟随、树状菜单和选项卡切换。通过这些案例，读者可以深入理解jQuery的选择器和事件处理，提升前端开发技能。

摘要由CSDN通过智能技术生成

滑动选项卡：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jQuery/jQuery.min.js"></script>
    <style>
      * {
     
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      ul {
     
        list-style: none;
        display: flex;
        position: relative;
      }
      ul li {
     
        height: 50px;
        line-height: 50px;
        text-align: center;
        width: 100px;
        position: relative;
        z-index: 1;
      }
      ul div {
     
        position: absolute;
        width: 100px;
        height: 50px;
        top: 0;
        left: 0;
        background-color: aqua;
        border-bottom: 3px solid red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <div></div>
    </ul>
  </body>
  <script>
    $("ul li").mouseover(function () {
     
      //获取索引值
      console.log($(this).index());
      var index = $(this).index();
      $("ul div")
        .stop()
        .animate(
          {
     
            left: index * 100,
          },
          200
        );
    });
  </script>
</html>

手风琴效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jQuery/jQuery.min.js"></script>
  </head>
  <style>
    * {
     
      padding: 0;
      margin: 0;
    }
    ul {
     
      width: 640px;
      height: 300px;
      margin: 100px;
      display: flex;
      border: 5px solid skyblue;
    }
    li {
     
      width: 160px;
      height: 300px;
      overflow: hidden;
    }
    li img {
     
      height