当前位置：首页 > news >正文

jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）

news 2025/9/6 23:02:41

菜单功能

淡入淡出轮播图(上)

淡入淡出轮播图(下)

折叠面板

菜单功能

<!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="./js/jquery-3.6.0.min.js"></script><style>* {margin: 0;padding: 0;}.menu {list-style: none;width: 500px;height: 50px;background: skyblue;margin: 100px auto;}.menu>li {float: left;width: 99px;height: 50px;line-height: 50px;font-size: 20px;border-right: 1px solid white;text-align: center;}.menu>li:nth-child(5){border-right: 0;}.dropdown {list-style: none;display: none;width: 99px;}.dropdown li {width: 99px;height: 30px;line-height: 30px;background: orange;}</style>
</head>
<body><ul class="menu"><li>菜单1<ul class="dropdown"><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li><li>菜单1</li></ul></li><li>菜单2<ul class="dropdown"><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li><li>菜单2</li></ul></li><li>菜单3</li><li>菜单4</li><li>菜单5</li></ul><script>$('.menu li').mouseenter(function (){$(this).children('.dropdown').slideDown();});$('.menu li').mouseleave(function (){$(this).children('.dropdown').slideUp();});</script>
</body>
</html>

淡入淡出轮播图(上)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 560px;height: 300px;border: 5px solid gray;margin: 100px auto;position: relative;overflow: hidden;}.m_unit{width: 10000px;height: 300px;position: absolute;top: 0;left: 0;}.m_unit ul{overflow: hidden;}.m_unit ul li{list-style: none;position: absolute;top: 0px;left: 0px;width: 560px;height: 300px;display: none;}.m_unit ul li.current{display: block;}/*左右按钮*/.btn span{width: 55px;height: 55px;background:
url('images/btnL.png');position: absolute;border-radius:  10px;top: 50%;margin-top: -28px;}.btn span.right{background: url('images/btnR.png');right: 0;}/*小圆点*/.circle ul li{list-style: none;float: left;width: 20px;height: 20px;background: orange;margin-right: 10px;border-radius: 50%;}.circle ul{overflow: hidden;}.circle{position: absolute;bottom: 10px;right: 10px;}.circle ul li.current{background: red;}</style>
</head>
<body><div class="box" id='box'><div class="m_unit" id='m_unit'><ul><li class='current'><a href="#"><img src="images/0.jpg" alt=""></a></li><li><a href="#"><img src="images/1.jpg" alt=""></a></li><li><a href="#"><img src="images/2.jpg" alt=""></a></li><li><a href="#"><img src="images/3.jpg" alt=""></a></li><li><a href="#"><img src="images/4.jpg" alt=""></a></li></ul></div><div class="btn"><span class='left' id='leftBtn'></span><span class='right' id='rightBtn'></span></div><div class="circle" id='circle'><ul><li class='current'></li><li></li><li></li><li></li><li></li></ul></div></div></body>
</html>

淡入淡出轮播图(下)

// 显示哪张图片的索引
var idx = 0;
var $lis = $('#m_unit ul li');
var imgLength = $lis.length;
// 定时器
var timer = setInterval(rightHandler, 2000);
// 鼠标滑动到元素上移除定时器不在自动轮播
$('#box').mouseenter(function () {clearInterval(timer);
});
// 鼠标离开元素,开启自动轮播
$('#box').mouseleave(function () {timer = setInterval(rightHandler, 2000);
});
// 点击右按钮,元素增加
$('#rightBtn').click(rightHandler);
function rightHandler() {$lis.eq(idx).fadeOut(1000);idx++;if (idx > imgLength - 1){idx = 0};$lis.eq(idx).fadeIn(1000);changecircle();
}
// 点击左按钮,元素减少
$('#leftBtn').click(function () {$lis.eq(idx).fadeOut(1000);idx--;if (idx < 0) {idx = imgLength - 1};$lis.eq(idx).fadeIn(1000);changecircle();
});
// 点击指示器,进行切换元素
$('#circle ul li').each(function () {$(this).click(function () {// index():获取当前元素的索引值var circleidx = $(this).index();if (circleidx == idx) {return};$lis.eq(idx).fadeOut(1000);idx = circleidx;$lis.eq(idx).fadeIn(1000);changecircle();});
});
// 切换指示器样式
function changecircle() {$('#circle ul li').eq(idx).css('background','red').siblings().css('background', 'orange');
}

折叠面板

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>折叠面板</title><script src="./js/jquery-3.6.0.min.js"></script><style>* {margin: 0;padding: 0}.container {width: 600px;margin: 80px auto;}.container ul {list-style: none}.container ul li h3 {border-bottom: 1px solid black;background-color: skyblue;position: relative}.container ul li h3 span {position: absolute;right: 5px}.container ul li .cont {display: none}</style>
</head>
<body><div class="container"><ul><li><h3>Section1<span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Praesent nisl lorem,dictum id pellentesque at, vestibulum ut
arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor
aliquam vitae.Curabitur molestie eros.</div></li><li><h3>Section2 <span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent nisl lorem, dictum id pellentesque at, vestibulum ut
arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.Curabitur molestie eros.</div></li><li><h3>Section3 <span>&gt;</span></h3><div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.Curabitur molestie eros.</div></li></ul></div><script>$('h3').click(function () {if ($(this).siblings().is(':visible')) {//如果是可见的，就把内容收起来$(this).siblings().slideUp();//变更符号$(this).find('span').html('>');} else {//在展开当前标题的内容之前，先把其他内容收起来$(this).parent().siblings().find('.cont').slideUp();//如果是不可见的，把内容div显示$(this).siblings().slideDown();// 变更其他元素符号$(this).parent().siblings().find('span').html('>');//变更符号$(this).find('span').html('v');}})</script>
</body>
</html>

jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）

目录菜单功能淡入淡出轮播图(上) 淡入淡出轮播图(下) 折叠面板菜单功能 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…...

编程日记 2023/11/27 4:11:46

攻防非对称问题｜当前企业面临的网络攻防非对称问题及其解决途径

随着信息技术的不断发展，网络已经成为我们日常生活和商业活动中不可或缺的一部分。然而，随之而来的是网络安全问题的不断升级。网络攻防非对称问题是当前亟待解决的一个复杂而严峻的挑战。其主要的表现是攻击成本远低于防御成本以及相同投入带来的攻击能…...

编程日记 2023/11/27 4:10:44

Java多线程二-线程安全

1、线程安全问题多个线程，同时操作同一个共享资源的时候，可能会出现业务安全问题。 2、实例：取钱的线程安全问题 2.1、场景小明和小红是夫妻，他们有个共同账户，余额是十万元，如果两人同时取钱并且各自取…...

编程日记 2023/11/27 4:08:42

Rust个人学习之结构体

第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到：结构体是一种自定义数据类型，它允许命名多个相关的…...

编程日记 2023/11/27 4:07:40

kafka详细讲解与安装

Kafka是一种分布式流处理平台，具有高吞吐量、可扩展性和容错性。它最初由LinkedIn开发，现已成为Apache软件基金会的顶级项目。Kafka广泛应用于实时数据流处理、日志收集、消息队列等场景。以下是关于Kafka的简要讲解和安装步骤： 一、Kafka…...

编程日记 2023/11/27 4:06:39

在我国干独立游戏开发有多难？

游戏独立开发在中国，一直以来都是一条充满挑战的道路。尽管有着无限的激情和创意，但面对市场、资金、政策等多方面的困难，许多独立开发者在这条路上艰难前行。首先，市场竞争激烈是中国游戏独立开发者面临的首要挑战。随着游戏产…...

编程日记 2023/11/27 4:05:38

不可错过的网上宝藏：2023年必看的顶级资源大盘点！

亲爱的“AI uTools”读者们，大家好！ 在这个信息爆炸的时代，互联网上充满了无数的资源，但如何从这海量信息中挑选出真正有用的宝藏呢？今天，我为大家精心挑选了一系列优质网站资源，涵盖了从文本处…...

编程日记 2023/11/27 4:04:37

日本服务器访问速度和带宽有没有直接关系？

　　对于许多网站和应用程序来说，服务器的访问速度是至关重要的。用户希望能够快速加载页面、上传和下载文件，而这些都与服务器的带宽有关。那么，日本服务器的访问速度和带宽之间是否存在直接关系呢? 我们需要了解什么是带宽。带宽是指网络…...

编程日记 2023/11/27 4:03:36

[vxe-table] vxe-table-column配合v-if导致列样式与位置错乱

<vxe-table-column v-if"pageInfo.id 4 ||pageInfo.id 8" title"上报类型" width"100" key1><template v-slot"{row}"><span>咨询工具</span></template> </vxe-table-column>//或者<vxe-ta…...

编程日记 2023/11/27 4:02:35

C# 忽略大小写

在 C# 中，你可以通过以下几种方式来忽略大小写： 使用 ToLower 或 ToUpper 方法将字符串转换为全小写或全大写，然后进行比较。使用 Compare 或 CompareOrdinal 方法，并传入正确的 StringComparer 实例以指示比较应该忽略大小写。使…...

编程日记 2023/11/27 4:01:34

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训在当今数字化时代，大数据技术的迅猛发展带来了前所未有的数据增长，同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全&#xff…...

编程日记 2023/11/27 4:00:34

[datastore@cyberfear.com].Elbie、[thekeyishere@cock.li].Elbie勒索病毒数据怎么处理|数据解密恢复

引言： 随着科技的进步，勒索病毒变得越来越复杂，而[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒是其中的一种令人头疼的威胁。本文将深入介绍[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒…...

编程日记 2023/11/27 3:58:31

【咕咕送书 | 第六期】深入浅出阐述嵌入式虚拟机原理，实现“小而能”嵌入式虚拟机！

🎬 鸽芷咕：个人主页 🔥 个人专栏:《粉丝福利》《linux深造日志》 ⛺️生活的理想，就是为了理想的生活! 文章目录 ⛳️ 写在前面参与规则引言一、为什么嵌入式系统需要虚拟化技术？1.1 专家推荐二、本书适合谁&#x…...

编程日记 2023/11/27 3:57:30

论文阅读——DDeP（cvpr2023）

分割标签耗时且贵，所以常常使用预训练提高分割模型标签有效性，反正就是，需要一个预训练分割模型。典型的分割模型encoder部分通过分类任务预训练，decoder部分参数随机初始化。作者认为这个方法次优，尤其标签比较少的情…...

编程日记 2023/11/27 3:56:29

Docker | Docker常用命令

Docker | Docker常用命令 ✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏：Docker系列 ✨…...

编程日记 2023/11/27 3:55:28

精进：简单聊聊华为战略与DSTE

首发：麦子禾作者：石头在以前专题文中，石头聊华为市场管理MM、基于价值驱动的业务设计VDBD、轻量级战略流程五看三定、业务领先模型BLM、业务执行力模型BEM比较多，印象中石头没有具体谈过DSTE（从战略规划到执行&…...

编程日记 2023/11/27 3:54:27

强制删除文件

DEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 强制删除文件,新建一个文本文件,将以上代码复制到文档中,保存,将文档重命名为delete.bat 如果弹窗提示修改后缀名可能导致文件不可用,也点击确认修改文件名称. 将需要强制删除的文件拖拽到这个delete.bat文件上,显示使用delete.bat打…...

编程日记 2023/11/27 3:53:26

Vue+ElementUI+C#技巧分享：周数选择器

文章目录前言一、周数的计算逻辑1.1 周数的定义1.2 年初周数的确定1.3 周数的计算方法二、VueElementUI代码实现2.1 计算周数2.2 获取周的日期范围2.3 根据周数获取日期范围2.4 控件引用2.4.1 控件引用代码分析2.4.2 初始化变量代码分析 2.5 周数选择器完整代码三、C#后端代…...

编程日记 2023/11/27 3:52:25

【算法】FFT-1（递归实现）（不包括IFFT）

FFT 多项式多项式乘法复数及运算导数泰勒公式及展开式欧拉公式单位根 FFTCode IFFT 多项式我们从课本中可以知道，一个 n − 1 n-1 n−1 次的多项式可以写成 a 0 a 1 x a 2 x 2 a 3 x 3 ⋯ a n − 1 x n − 1 a_{0}a_{1}xa_{2}x^2a_{3}x^3\dotsa_{n-1}x^{n-…...

编程日记 2023/11/27 3:51:24

大模型训练效率提升至2.6倍，腾讯Angel机器学习框架升级

在算力紧缺的背景下，如何提升大模型训练和推理的效率，并降低成本，成为业界关注的焦点。 11月23日，腾讯披露，腾讯混元大模型背后的自研机器学习框架Angel再次升级，大模型训练效率提升至主流开源框架的2.6倍…...

编程日记 2023/11/27 3:50:22

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/8/26 10:14:34

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/8/22 5:05:10

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/9/3 21:03:21

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/8/18 9:46:04

Mac下Android Studio扫描根目录卡死问题记录

环境信息操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...

编程新知 2025/9/2 18:35:13