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倍…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
es6+和css3新增的特性有哪些
一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...