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倍…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
《Offer来了：Java面试核心知识点精讲》大纲
文章目录 一、《Offer来了：Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了：Java面试核心知识点精讲（原理篇）》技术文章大纲核心主题：Java基础原理与面试高频考点Java虚拟机（JVM）原理Java并发编程原理Jav…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中，要设置一个操作在指定延迟后（例如3秒）执行，可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法，它接受两个参数： 要执行的函数&…...