千峰jquery【案例】

news2024/9/30 7:26:00

滑动选项卡：

在这里插入图片描述

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/348782.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RabbitMQ学习（六）：发布确认

RabbitMQ学习（六）：发布确认

一、发布确认的原理生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的 消息都将会被指派一个唯一的 ID(从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给生产者(包含消…
阅读更多...
V4l2框架基础知识（一）

V4l2框架基础知识（一）

V4L2框架-v4l2 device V4l2视频设备驱动基础 1.V4L2是专门为linux设备设计的整套视频框架&#xff08;其主要核心在linux内核&#xff0c;相当于操作系统上层的视频源捕获驱动框架&#xff09;&#xff0c;为上层访问系统底层的视频设备提供了一个统一的标准接口&#xff0c;…
阅读更多...
【LeetCode】剑指 Offer 05. 替换空格 p50 -- Java Version

【LeetCode】剑指 Offer 05. 替换空格 p50 -- Java Version

题目链接&#xff1a; https://leetcode.cn/problems/ti-huan-kong-ge-lcof/ 1. 题目介绍&#xff08;05. 替换空格&#xff09; 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20"。 【测试用例】&#xff1a; 示例1&#xff1a; 输入&#xff1a;s …
阅读更多...
TransH模型原理

TransH模型原理

从TransE到TransH模型 在之前知识图谱模型中&#xff0c;我们介绍了TransE模型的基本原理&#xff0c;对于TransE模型其基本原理为&#xff1a; hrth r thrt 其中hhh是头实体向量&#xff0c;rrr是关系向量&#xff0c;ttt是尾实体向量。根据这个核心公式&#xff0c;我们不…
阅读更多...
AI工衣工服智能识别检测算法 yolov7

AI工衣工服智能识别检测算法 yolov7

AI工衣工服智能识别检测算法通过yolov7网络模型深度学习算法&#xff0c;AI工衣工服智能识别检测算法对场人员穿戴进行实时不间断监测&#xff0c;发现现场人员未按要求穿戴时&#xff0c;立即抓拍告警。YOLO 的核心思想就是把目标检测转变成一个回归问题&#xff0c;利用整张图…
阅读更多...
Unity 编辑器工具之批量设置图片压缩

Unity 编辑器工具之批量设置图片压缩

一个简单的工具,对Unity下的图片做批量压缩处理,主要有以下功能:自动取消 "Generte Mip Maps" 勾选;针对文件夹批量自动(或手动选择压缩格式)设置图片压缩并自动保存;单个图片文件的压缩设置;使用方法,右键单张图片(或者包含图片的文件夹)会打开一个设置窗口 如下,窗…
阅读更多...
Vue笔记(2)——页面渲染与数据收集

Vue笔记(2)——页面渲染与数据收集

一、条件渲染 v-show v-if 1. v-show 2. v-if v-else的块和v-if的块间不能有中断&#xff0c;否则无效 3. v-if与template配合 当同时条件渲染多个元素时&#xff0c;可以将v-if与template的配合使用&#xff0c;若条件值为false&#xff0c;vue模板解析时会直接去掉这一块…
阅读更多...
AcWing语法基础课笔记 第二章 printf语句与C++中的判断结构

AcWing语法基础课笔记 第二章 printf语句与C++中的判断结构

第二章 printf语句与C中的判断结构 学习语言最好的方式就是实践&#xff0c;每当掌握一个新功能时&#xff0c;就要立即将这个功能应用到实践中。 ——闫学灿 一、printf输出格式 注意&#xff1a;使用printf 时最好添加头文件 #include <cstdio>。 Int、float、double、…
阅读更多...
基于共聚焦显微技术的显微镜和荧光显微镜的区别

基于共聚焦显微技术的显微镜和荧光显微镜的区别

荧光显微镜主要应用在生物领域及医学研究中&#xff0c;能得到细胞或组织内部微细结构的荧光图像&#xff0c;在亚细胞水平上观察诸如Ca2 、PH值&#xff0c;膜电位等生理信号及细胞形态的变化&#xff0c;是形态学&#xff0c;分子生物学&#xff0c;神经科学&#xff0c;药理…
阅读更多...
GEE学习笔记 八十九：在自己的APP中使用绘制矢量（中）

GEE学习笔记 八十九：在自己的APP中使用绘制矢量（中）

这一篇先讲一下ui.Map.GeometryLayer(...)&#xff0c;也就是生成显示的绘制矢量图形图层&#xff0c;具体来讲就是地图上左上角绘制的图形后添加的图层。 1、什么是GeometryLayer&#xff1f; &#xff08;1&#xff09;直接在地图上加载定义的图层 //1. add normal layer …
阅读更多...
基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【二】【整合springSecurity】

基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【二】【整合springSecurity】

1、创建数据库 注意&#xff1a;mysql默认字符集为utf8&#xff0c;默认排序规则为utf8_general_ci。一般我们也会选择字符集为utf-8 MySQL在5.5.3之后增加了这个utf8mb4的编码&#xff0c;utf8mb4完全向下兼容utf8&#xff0c;为了节省空间&#xff0c;一般情况下使用utf8也就…
阅读更多...
中国国家级地面气象站基本气象要素日值数据集(V3.0)

中国国家级地面气象站基本气象要素日值数据集(V3.0)

数据集摘要 数据集包含了中国基本气象站、基准气候站、一般气象站在内的主要2474个站点1951年1月以来本站气压、气温、降水量、蒸发量、相对湿度、风向风速、日照时数和0cm地温要素的日值数据。数据量为21.3GB。 (1)SURF_CLI_CHN_MUL_DAY-TEM-12001-201501.TXT 气温数据TEM, 包…
阅读更多...
央行数据-一款查逆回购 LPR 货币供应量 资产负债表 Shibor 数据的专业工具

央行数据-一款查逆回购 LPR 货币供应量 资产负债表 Shibor 数据的专业工具

自己开发的APP, App Store搜索"央行数据" 即可下载欢迎大家下载,给修改意见逆回购、正回购、MLF、票据&#xff0c;俗称央行发钱房贷基准利率多少? M2/M1/M0, 资产负债表,Shibor 了解下这款APP是经济,投资理财,股市,房价分析参考利器适用于关注经济、货币政策的用户…
阅读更多...
第五章.与学习相关技巧—权重初始值(随机初始值，Xavier初始值，He初始值)

第五章.与学习相关技巧—权重初始值(随机初始值，Xavier初始值，He初始值)

第五章.与学习相关技巧 5.2 权重初始值 本节将介绍权重初始值的推荐值&#xff0c;并通过实验确认神经网络的学习是否会快速进行。 1.权值衰减 权值衰减就是一种以减少权重参数的值为目的进行学习的方法&#xff0c;通过减少权重参数值来抑制过拟合的情况发生。 2.权重初始值不…
阅读更多...
表现良好的最长时段[前缀和思想子数组]

表现良好的最长时段[前缀和思想子数组]

前缀和与最长子数组前言一、表现良好的最长时间段二、前缀和思想&子数组1、前缀和&map2、前缀和&单调栈总结参考文献前言 对于子数组/子串问题&#xff0c;紧密连续前缀和/滑动窗口/单调栈&#xff1b;挖掘内在规律&#xff0c;可以简化代码&#xff0c;降低时空复…
阅读更多...
Python多进程同步——文件锁

Python多进程同步——文件锁

多个进程共享同一份资源&#xff08;共享内存、文件等&#xff09;时&#xff0c;会涉及到资源竞争问题。为了解决这种问题&#xff0c;一般采取的措施是进程在访问资源前加锁保护&#xff0c;避免多个进程同时读写。本文介绍的Python文件锁可以用来解决多进程的同步问题。 目录…
阅读更多...
天荒地老修仙功-第六部第二篇：Spring Cloud Eureka自我保护机制

天荒地老修仙功-第六部第二篇：Spring Cloud Eureka自我保护机制

Eureka Server 在运行期间会去统计心跳失败比例在 15 分钟之内是否低于 85%&#xff0c;如果低于 85%&#xff0c;Eureka Server 会将这些实例保护起来&#xff0c;让这些实例不会过期&#xff0c;但是在保护期内如果服务刚好这个服务提供者非正常下线了&#xff0c;此时服务消…
阅读更多...
[SCTF2019]babyre 题解

[SCTF2019]babyre 题解

对未来的真正慷慨&#xff0c;是把一切献给现在。 ——加缪 目录 1.查壳 2.处理花指令&#xff0c;找到main函数 这一操作过程可以参考下面的视频&#xff1a; 3.静态分析第一部分,psword1 4.静态分析第二部分,psword2 5.静态分析第五部分&#xff0c;psword3 6.根据ps…
阅读更多...
国产Linux操作系统读写RFID、NFC、IC卡示例源码

国产Linux操作系统读写RFID、NFC、IC卡示例源码

Windows系统应该是我们接触最多、最为熟悉的电脑端操作系统。Windows操作系统只能安装在x86指令集的CPU电脑中&#xff0c;x64是x86的升级版&#xff0c;Intel、Amd是x86指令集CPU最大的2个生产商。Windows系统下&#xff0c;外设接口驱动一般都封装成DLL动态库内&#xff0c;通…
阅读更多...
基于springboot开发众筹平台前后台管理系统【完整源码+数据库+运行指导】

基于springboot开发众筹平台前后台管理系统【完整源码+数据库+运行指导】

一、项目简介 本项目是一套基于springboot开发众筹平台前后台管理系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023