千峰jquery【案例】

news2024/11/18 4:44:37

滑动选项卡：

在这里插入图片描述

<!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: 400px;
    }
  </style>
  <body>
    <ul>
      <li><img src="img/q.jpg" alt="" /></li>
      <li><img src="img/w.jpg" alt="" /></li>
      <li><img src="img/e.jpg" alt="" /></li>
      <li><img src="img/r.jpg" alt="" /></li>
    </ul>
  </body>
  <script>
    $("ul li").mousemove(function () {
      $(this)
        .stop()
        .animate({
          width: 520,
        })
        .siblings()
        .stop()
        .animate({
          width: 40,
        });
    });
    //离开
    $("ul ").mouseleave(function () {
      $("ul li").stop().animate({
        width: 160,
      });
    });
  </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>
  </head>
  <script src="../jQuery/jQuery.min.js"></script>
  <style>
    *{padding:0;  margin:0;}
    
    #box{
        width: 200px;
        height: 50px;
        background-color: red;
        position: relative;
        margin: 100px;
    }
    #box p{
        width: 300px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        left: 100px; top: 100px;
        display: none;
        pointer-events: none;
        /* 穿透 */
        z-index: 100;
    }
    </style>
</head>
<!-- 做一个点击头像然后显示内容 -->
<body>
<div id="box">
    你的头像
    <p>
        头像介绍
    </p>
</div>
</body>
<script>

// box.onmouseover = function(){
// this.firstElementChild.style.display="block";
// }
// box.onmouseout = function(){
// this.firstElementChild.style.display="none";
// }
// box.οnmοusemοve=function(evt){
// // console.log(evt.offsetX,evt.offsetY)
// this.firstElementChild.style.left=evt.offsetX+50+"px";
// this.firstElementChild.style.top=evt.offsetY+50+"px";  
// }

$("#box").mouseover(function() {
    $(this).children("p").css("display","block")
})

$("#box").mouseout(function() {
    $(this).children("p").css("display","none")
})

$("#box").mousemove(function(evt) {
    //offset()设置相对于文档流的左上角
    // pageX() 属性是鼠标指针的位置，相对于文档的左边缘.
    $(this).children("p").offset({
       left:evt.pageX,
       top:evt.pageY,

    })
    
})
</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>
  </head>
  <style>
    ul,
    ol {
      list-style: none;
      font-size: 30px;
      cursor: pointer;
    }
    li::before {
      content: "+";
    }
    li.active::before {
      content: "-";
    }
    ol {
      display: none;
    }
  </style>
  <script src="../jQuery/jQuery.min.js"></script>
  <body>
    <ul>
      <li class="active">
        1
        <ol>
          <li>1-1</li>
          <li>2-1</li>
          <li>3-1</li>
        </ol>
      </li>
      <li>
        2
        <ol>
          <li>1-1</li>
          <li>2-1</li>
          <li>3-1</li>
        </ol>
      </li>
      <li>
        3
        <ol>
          <li>1-1</li>
          <li>2-1</li>
          <li>3-1</li>
        </ol>
      </li>
    </ul>
  </body>
  <script>
    // 只允许一个展开
    $("ul li").click(function () {
      $(this).toggleClass("active").children("ol").slideToggle(500);
      $(this).siblings().removeClass("active").children("ol").slideUp(500);
      //去除冒泡现象
      return false;
    });
  </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>
    <!-- 后期可自由添加选项卡 -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      ul {
        list-style: none;
        padding-left: 0;
      }
      .header {
        display: flex;
        width: 752px;
      }
      .header li {
        flex: 1;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid black;
      }
      .box1 li {
        left: 0;
        top: 0;
        width: 751px;
        height: 314px;
        background-color: palevioletred;
        display: none;
        border: 1px solid black;
      }
      .box1 li img {
        width: 751px;
        /* margin-left: 100px; */
      }
      .header .active {
        background-color: aqua;
      }
      .box1 .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul class="header">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <ul class="box1">
      <li class="active"><img src="img/1.jpg" /></li>
      <li><img src="img/2.jpg" /></li>
      <li><img src="img/3.png" /></li>
      <li><img src="img/4.png" /></li>
      <li><img src="img/5.png" /></li>
      <li><img src="img/7.png" /></li>
    </ul>
  </body>
  <script>
    $(".header li").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      //获取索引值，赋给下面的的
      console.log($(this).index());
      var index = $(this).index();
      $(".box1 li")
        .eq(index)
        .addClass("active")
        .siblings()
        .removeClass("active");
    });

    //trigger 代码触发  trigger() 方法触发被选元素的指定事件类型。
    //百度输入框的id是kw,在后面输入想查询的值就能进行搜索
    // $("#kw").val("唐三");
    // setTimeout(function () {
    //   $("#form ul li").eq(4).trigger("click");
    // }, 2000);
  </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>
  <body>
    <ul class="list">
      <li>1</li>
      <li class="active">2</li>
      <li>3</li>
      <li>4</li>
      <li class="end">5</li>
      <li>
        <ul>
          <li>11</li>
          <li>22</li>
          <li>33</li>
        </ul>
      </li>
    </ul>
    <div id="box"></div>
  </body>
  <script>
    //基本选择器，用法和document.querySelector()一样
    console.log($("#box")); //返回的是一个伪数组：E.fn.init [div#box]
    console.log($("#box")[0]); //通过数组下标的方法，可以选出：<div id="box"></div>
    //特殊选择器
    console.log($("ul li:first"));
    console.log($("ul li:last"));
    console.log($("ul li:eq(0)"));
    // 奇数选择：
    console.log($("ul li:odd"));
    //偶数选择 因为索引是从0开始，所以偶数就包括0 2 4
    console.log($("ul li:even"));

    console.log($("ul li.active"));
    // 找下一个兄弟节点
    console.log($("ul li.active").next());
    //找下面所有的兄弟节点
    console.log($("ul li.active").nextAll());
    // 直到哪个节点停止,不包含停止的那个节点,不传参数，代表一直到结尾
    console.log($("ul li.active").nextUntil(".end"));
    // 找上一个兄弟节点
    console.log($(" ul li.active").prev());
    // 找父节点
    console.log($("ul li.active").parent());
    // 找自己以上的所有节点，直到HTML
    console.log($("ul li.active").parents());
    // 找自己所有的兄弟
    console.log($("ul li.active").siblings());
    // 选择出自己所有的孩子节点
    console.log($("ul.list").children());
    // 找出自己所有相同类型的孩子（孙子)
    console.log($("ul").find("li"));
    //获取索引
    console.log($("ul li.active").index());
  </script>
</html>