千峰jquery【案例】

news/2024/7/11 1:15:22 标签: jquery, javascript, 前端

滑动选项卡：

在这里插入图片描述

<!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>javascript">
    $("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>javascript">
    $("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>javascript">

// 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>javascript">
    // 只允许一个展开
    $("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>javascript">
    $(".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>javascript">
    //基本选择器，用法和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>

http://www.niftyadmin.cn/n/67682.html

相关文章

vueuse state篇、请求篇

vueuse state篇、请求篇

文章目录state篇createGlobalState:全局响应式状态createInjectionState:通过provide/inject实现状态管理createSharedComposable&#xff1a;共享状态请求篇useAsyncState&#xff1a;类似react-querystate篇 createGlobalState:全局响应式状态 通过scope.run来管理依赖&…
阅读更多...
Elasticsearch 安装（二）

Elasticsearch 安装（二）

目录前言一、Linux 安装1、下载安装包⑴、选择需要的安装包⑵、下载解压到安装目录2、查看解压后目录结构3、启动 Elasticsearch⑴、正常启动流程⑵、启动过程遇到的问题①、启动报错②、创建运行 Elasticsearch 的用户&#xff0c;启动成功&#xff0c;但无法访问③、停止Elas…
阅读更多...
今天正式上线！虹科汽车免拆诊断云展厅：感受精准修车魅力，畅享汽修领先技术

今天正式上线！虹科汽车免拆诊断云展厅：感受精准修车魅力，畅享汽修领先技术

『虹科汽车免拆诊断云展厅』 2月15日正式上线&#xff01; 在这里&#xff0c;您可以参观了解&#xff1a; 虹科Pico汽车示波器产品模型 全流程专业讲解的视频资料 产品功能和应用场景 全面详细的产品手册 还有虹科首席技术工程师在线连麦答疑&#xff01;&#xff01;&#xf…
阅读更多...
重生之我是赏金猎人(一)-某SRC测试系统无脑Getshell

重生之我是赏金猎人(一)-某SRC测试系统无脑Getshell

0x01 前言 https://github.com/J0o1ey/BountyHunterInChina 欢迎大佬们点个star 0x02 资产收集到脆弱系统 在某src挖掘过程中&#xff0c;本人通过ssl证书对域名资产进行了收集&#xff0c;通过计算域名对应ip段的权重 整理出其C段资产&#xff0c;进行了批量目录扫描 查看…
阅读更多...
【RuoYi-Vue-Plus】学习笔记 48 - 数据加密功能 Encrypt 源码分析

【RuoYi-Vue-Plus】学习笔记 48 - 数据加密功能 Encrypt 源码分析

文章目录前言参考目录功能实现的准备知识1、目录结构说明2、一些准备知识2.1、自定义插件如何实现&#xff1f;2.2、Mybatis 拦截器的拦截点&#xff1f;2.3、关于 Intercepts 注解&#xff1f;2.4、关于拦截器中的 Interceptor() 方法和 plugin() 方法&#xff1f;功能调用流程…
阅读更多...
1997. 访问完所有房间的第一天

1997. 访问完所有房间的第一天

题目 你需要访问 n 个房间&#xff0c;房间从 0 到 n - 1 编号。同时&#xff0c;每一天都有一个日期编号&#xff0c;从 0 开始&#xff0c;依天数递增。你每天都会访问一个房间。 最开始的第 0 天&#xff0c;你访问 0 号房间。给你一个长度为 n 且 下标从 0 开始 的数组 n…
阅读更多...
带参方法的使用

带参方法的使用

问题 按适当顺序返回列表中的元素。 方法 通过list集合的listIterator()方法得到&#xff0c;用于沿任一方向遍历列表。可以在迭代期间修改元素&#xff0c;并获取列表中迭代器的当前位置。 import java.util.ArrayList; import java.util.List; import java.util.ListIterator…
阅读更多...
springboot自动配置原理以及spring.factories文件的作用详解

springboot自动配置原理以及spring.factories文件的作用详解

一、springboot 自动配置原理先说说我们自己的应用程序中Bean加入容器的办法&#xff1a;bean加入容器我们在应用程序的入口设置了 SpringBootApplication标签&#xff0c;默认情况下他会扫描所有次级目录。如果增加了 scanBasePackages属性&#xff0c;就会扫描所有被指定的路…
阅读更多...
最新文章

Copyright @ 2022~2023