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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这是大学生就业网站最基础的布局。

<!DOCTYPE html> <html> <head> <title>大学生就业网站</title> <style> /* Reset default margin and padding */ *, *::before, *::after { margin: 0; padding: 0; box-s…

2023亚太地区数学建模C题思路+模型+代码+论文

2023亚太杯&#xff0c;亚太地区C题思路模型&#xff1a;开赛后第一时间更新&#xff0c;获取见文末名片 【赛程安排】   注册截止日期&#xff1a;北京时间2023年11月22日&#xff08;星期三&#xff09;   竞赛开始时间&#xff1a;北京时间2023年11月23日&#xff08;星…

【python基础】文件和异常详解:使用、读取、写入、追加、保存用户的信息,以及优雅的处理异常

文章目录 一. 从文件中读取数据1. 读取整个文件2. 文件路径3. 逐行读取4. 创建一个包含文件各行内容的列表 二. 写入文件1. 写入空文件2. 写入多行3. 附加到文件 三. 异常1. 处理ZeroDivisionError异常2. 使用try-except代码块3. try-except-else ing4. 处理FileNotFoundError异…

centos7安装mariadb

步骤 1: 更新系统 确保您的系统已更新为最新版本。在终端或命令行中执行以下命令&#xff1a; sudo yum update步骤 2: 安装MariaDB 添加MariaDB仓库 sudo yum install epel-release # 安装 EPEL 软件仓库 sudo rpm -Uvh https://downloads.mariadb.com/MariaDB/mariadb_re…

SpingBoot原理

目录 配置优先级Bean管理 (掌握)Bean的获取 ApplicationContext.getBeanBean的作用域 Scope("prototype") Lazy第三方Bean Bean Configuration SpringBoot底层原理 起步依赖与自动配置(无需手撸但面试高频知识点)自动配置引入第三方依赖常见方案方案1&#xff1a;Com…

46-设计问题-最小栈

原题链接&#xff1a; 198. 打家劫舍 题目描述&#xff1a; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&a…

Java引用和内部类

引用 引用变量 引用相当于一个 “别名”, 也可以理解成一个指针. 创建一个引用只是相当于创建了一个很小的变量, 这个变量保存了一个整数, 这个整数表示内存中的一个地址. new 出来的数组肯定是在堆上开辟的空间,那么在栈中存放的就是引用,引用存放的的就是一个对象的地址,代表…

格式化名称节点,启动Hadoop

1.循环删除hadoop目录下的tmp文件&#xff0c;记住在hadoop目录下进行 rm tmp -rf 使用上述命令&#xff0c;hadoop目录下为&#xff1a; 2.格式化名称节点 # 格式化名称节点 ./bin/hdfs namenode -format 3.启动所有节点 ./sbin/start-all.sh 效果图&#xff1a; 4.查看节…

HCIP-五、OSPF-1 邻居状态机和 DR 选举

五、OSPF-1 邻居状态机和 DR 选举 实验拓扑实验需求及解法1.如图所示&#xff0c;配置设备 IP 地址。2.配置 OSPF3. 按照以下步骤观察 R1 与 R2 的邻居关系建立过程 实验拓扑 实验需求及解法 通过本次实验&#xff0c;验证 OSPF 邻居状态机变化过程&#xff0c;以及 DR 选举过…

Grok AI 是什么?

原文链接&#xff1a;https://openaigptguide.com/grok-ai/ Grok AI是由马斯克推出的一款高级别的人工智能大语言模型&#xff0c;旨在帮助软件开发者以不同的口头语言交流和表达。它是基于多种深度学习大规模固定模型架构&#xff0c;如ELMo、BERT和GPT&#xff0c;以及更多新…

vue3 hook库

import { ElNotification } from "element-plus"; /*** description 接收数据流生成 blob&#xff0c;创建链接&#xff0c;下载文件* param {any} data 导出的文件blob数据 (必传)* param {String} tempName 导出的文件名 (必传)* param {Boolean} isNotify 是否有导…

今日定音,博通以610亿美元成功收购VMware | 百能云芯

博通&#xff08;Broadcom&#xff09;日前宣布&#xff0c;已获得中国监管机构的批准&#xff0c;将于今日完成对云计算公司VMware的收购交易。这意味着&#xff0c;610亿美元的收购案正式收关。 据悉&#xff0c;中国市场监管总局在11月21日晚发布了有关附加限制性条件批准博…

Python-大数据分析之常用库

Python-大数据分析之常用库 1. 数据采集与第三方数据接入 1-1. Beautiful Soup ​ Beautiful Soup 是一个用于解析HTML和XML文档的库&#xff0c;非常适用于网页爬虫和数据抓取。可以提取所需信息&#xff0c;无需手动分析网页源代码&#xff0c;简化了从网页中提取数据的过…

2023亚太杯数学建模A题B题C题思路模型代码论文指导

2023亚太地区数学建模A题思路&#xff1a;开赛后第一时间更新&#xff0c;获取见文末 名片 2023亚太地区数学建模B题思路&#xff1a;开赛后第一时间更新&#xff0c;获取见文末 名片 2023亚太地区数学建模C题思路&#xff1a;开赛后第一时间更新&#xff0c;获取见文末 名片…

排序算法--冒泡排序

实现逻辑 ① 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。 ②对每一对相邻元素作同样的工作&#xff0c;从开始第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数。 ③针对所有的元素重复以上的步骤&#xff0c;除了最后一个。 ④…

centos7 网卡聚合bond0模式配置

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、什么是网卡bond二、网卡bond的模式三、配置bond0 一、什么是网卡bond 所谓bond&#xff0c;就是把多个物理网卡绑定成一个逻辑上的网卡&#xff0c;使用同一个…

HTML5 怎么发布抖音小游戏

要发布 HTML5 抖音小游戏&#xff0c;可以按照以下步骤进行操作&#xff1a; 准备游戏&#xff1a;确保你的 HTML5 游戏已经开发完成&#xff0c;并且测试无误。注册抖音账号&#xff1a;如果你还没有抖音账号&#xff0c;需要先注册一个。可以使用手机号、微信或者第三方账号…

Java update scheduler

引言 Java 更新调度器是 Java 中的一个特性&#xff0c;可以自动化 Java 应用程序的更新过程。它提供了一种方便的方式来安排 Java 应用程序的更新&#xff0c;确保其与最新的功能、错误修复和安全补丁保持同步。本文将深入介绍如何使用 Java 更新调度器&#xff0c;并解释它对…

威胁攻击层出不穷,信息化负责人该如何增强对抗与防御能力?

11月15日&#xff0c;以“加快推进智慧校园建设 赋能为党育才为党献策”为主题的2023年华东地区党校&#xff08;行政学院&#xff09;信息化和图书馆工作高质量发展专题研讨班顺利举办。 作为国内云原生安全领导厂商&#xff0c;安全狗受邀出席活动。 厦门服云信息科技有限公…

腾讯云服务器99元一年是真的吗?假的!

腾讯云服务器99元一年是真的吗&#xff1f;假的&#xff0c;不用99元&#xff0c;只要88元即可购买一台2核2G3M带宽的轻量应用服务器&#xff0c;99元太多了&#xff0c;88元就够了&#xff0c;腾讯云百科活动 txybk.com/go/txy 活动打开如下图&#xff1a; 腾讯云轻量服务器 腾…