jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）
目录
菜单功能
淡入淡出轮播图(上)
淡入淡出轮播图(下)
折叠面板
菜单功能
<!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>></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>></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>></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"><…...
攻防非对称问题｜ 当前企业面临的网络攻防非对称问题及其解决途径
随着信息技术的不断发展，网络已经成为我们日常生活和商业活动中不可或缺的一部分。然而，随之而来的是网络安全问题的不断升级。网络攻防非对称问题是当前亟待解决的一个复杂而严峻的挑战。其主要的表现是攻击成本远低于防御成本以及相同投入带来的攻击能…...
Java多线程二-线程安全
1、线程安全问题 多个线程，同时操作同一个共享资源的时候，可能会出现业务安全问题。 2、实例：取钱的线程安全问题 2.1、场景 小明和小红是夫妻，他们有个共同账户，余额是十万元，如果两人同时取钱并且各自取…...
Rust个人学习之结构体
第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到第一反应，Rust结构体跟python的很像，不知道感觉对不对； 书中提到：结构体是一种自定义数据类型，它允许命名多个相关的…...
kafka详细讲解与安装
Kafka是一种分布式流处理平台，具有高吞吐量、可扩展性和容错性。它最初由LinkedIn开发，现已成为Apache软件基金会的顶级项目。Kafka广泛应用于实时数据流处理、日志收集、消息队列等场景。 以下是关于Kafka的简要讲解和安装步骤： 一、Kafka…...
在我国干独立游戏开发有多难？
游戏独立开发在中国，一直以来都是一条充满挑战的道路。尽管有着无限的激情和创意，但面对市场、资金、政策等多方面的困难，许多独立开发者在这条路上艰难前行。 首先，市场竞争激烈是中国游戏独立开发者面临的首要挑战。随着游戏产…...
不可错过的网上宝藏：2023年必看的顶级资源大盘点！
亲爱的“AI uTools”读者们，大家好！ 在这个信息爆炸的时代，互联网上充满了无数的资源，但如何从这海量信息中挑选出真正有用的宝藏呢？今天，我为大家精心挑选了一系列优质网站资源，涵盖了从文本处…...
日本服务器访问速度和带宽有没有直接关系？
对于许多网站和应用程序来说，服务器的访问速度是至关重要的。用户希望能够快速加载页面、上传和下载文件，而这些都与服务器的带宽有关。那么，日本服务器的访问速度和带宽之间是否存在直接关系呢? 我们需要了解什么是带宽。带宽是指网络…...
[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…...
C# 忽略大小写
在 C# 中，你可以通过以下几种方式来忽略大小写： 使用 ToLower 或 ToUpper 方法将字符串转换为全小写或全大写，然后进行比较。使用 Compare 或 CompareOrdinal 方法，并传入正确的 StringComparer 实例以指示比较应该忽略大小写。使…...
大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训
大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训 在当今数字化时代，大数据技术的迅猛发展带来了前所未有的数据增长，同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全ÿ…...
[datastore@cyberfear.com].Elbie、[thekeyishere@cock.li].Elbie勒索病毒数据怎么处理|数据解密恢复
引言： 随着科技的进步，勒索病毒变得越来越复杂，而[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒是其中的一种令人头疼的威胁。本文将深入介绍[datastorecyberfear.com].Elbie、[thekeyisherecock.li].Elbie勒索病毒…...
【咕咕送书 | 第六期】深入浅出阐述嵌入式虚拟机原理，实现“小而能”嵌入式虚拟机！
🎬 鸽芷咕：个人主页 🔥 个人专栏:《粉丝福利》 《linux深造日志》 ⛺️生活的理想，就是为了理想的生活! 文章目录 ⛳️ 写在前面参与规则引言一、为什么嵌入式系统需要虚拟化技术？1.1 专家推荐 二、本书适合谁&#x…...
论文阅读——DDeP（cvpr2023）
分割标签耗时且贵，所以常常使用预训练提高分割模型标签有效性，反正就是，需要一个预训练分割模型。典型的分割模型encoder部分通过分类任务预训练，decoder部分参数随机初始化。作者认为这个方法次优，尤其标签比较少的情…...
Docker | Docker常用命令
Docker | Docker常用命令 ✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏：Docker系列 ✨…...
精进：简单聊聊华为战略与DSTE
首发：麦子禾 作者：石头 在以前专题文中，石头聊华为市场管理MM、基于价值驱动的业务设计VDBD、轻量级战略流程五看三定、业务领先模型BLM、业务执行力模型BEM比较多，印象中石头没有具体谈过DSTE（从战略规划到执行&…...
强制删除文件
DEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 强制删除文件,新建一个文本文件,将以上代码复制到文档中,保存,将文档重命名为delete.bat 如果弹窗提示修改后缀名可能导致文件不可用,也点击确认修改文件名称. 将需要强制删除的文件拖拽到这个delete.bat文件上,显示使用delete.bat打…...
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#后端代…...
【算法】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-…...
大模型训练效率提升至2.6倍，腾讯Angel机器学习框架升级
在算力紧缺的背景下，如何提升大模型训练和推理的效率，并降低成本，成为业界关注的焦点。 11月23日，腾讯披露，腾讯混元大模型背后的自研机器学习框架Angel再次升级，大模型训练效率提升至主流开源框架的2.6倍…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
（一）单例模式
一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
【若依】框架项目部署笔记
参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作： 压缩包下载：http://download.redis.io/releases 1. 上传压缩包，并进入压缩包所在目录，解压到目标…...