jQuery基础05

最新推荐文章于 2024-07-25 12:03:50 发布
最新推荐文章于 2024-07-25 12:03:50 发布
阅读量150 收藏
点赞数
分类专栏： JQuery 文章标签： jquery css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq_666/article/details/113726241
版权

显示/隐藏动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示和隐藏动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				display: none;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					//$("div").css("display","block");
					$("div").show(1000,function(){
						//作用：动画执行完毕之后调用
						alert("显示动画执行完毕");
					});
				});
				$("button").eq(1).click(function(){
					//$("div").css("display","none");
					$("div").hide(1000,function(){
						alert("隐藏动画执行完毕");
					});
				});
				$("button").eq(2).click(function(){
					$("div").toggle(1000,function(){
						alert("动画切换执行完毕");
					});
				});
			});
		</script>
	</head>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div>
			
		</div>
	</body>
</html>

对联广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对联广告</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.left{
				float: left;
				position: fixed;
				left: 0;
				top: 170px;
			}
			.right{
				float: right;
				position: fixed;
				right: 0;
				top: 170px;
			}
			img{
				display: none;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//监听网页滚动
				$(window).scroll(function(){
					//获取网页滚动的偏移位
					var offset = $("html,body").scrollTop();
					//判断网页是否滚动到了指定的位置
					if(offset >= 500){
						//显示广告
						$("img").show(1000);
					}else{
						$("img").hide(1000);
					}
				});
			});
		</script>
	</head>
	<body>
		<img src="../img/碧蓝航线长门.gif" class="left">
		<img src="../img/碧蓝航线长门.gif" class="right">
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

展开和收起动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>展开和收起动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 300px;
				background: red;
				display: none;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$("div").slideDown(1000,function(){
						alert("展开完毕");
					});
				});
				$("button").eq(1).click(function(){
					$("div").slideUp(1000,function(){
						alert("收起完毕");
					});
				});
				$("button").eq(2).click(function(){
					$("div").slideToggle(1000,function(){
						alert("切换完毕");
					});
				});
			});
		</script>
	</head>
	<body>
		<button>展开</button>
		<button>收起</button>
		<button>切换</button>
		<div>
			
		</div>
	</body>
</html>

折叠菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠菜单</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.nav{
				list-style: none;
				width: 300px;
				margin: 100px auto;
			}
			.nav>li{
				border: 1px solid #000;
				line-height: 35px;
				border-bottom: none;
				text-indent: 2em;
				position: relative;
			}
			.nav>li:last-child{
				border-bottom: 1px solid #000;
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px;
				
			}
			.nav>li:first-child{
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
			}
			.nav>li>span{
				background: url(../img/箭头.png) no-repeat center center;
				display: inline-block;
				width: 32px;
				height: 32px;
				position: absolute;
				right: 10px;
				top: 5px;
			}
			.sub>li{
				list-style: none;
				background: mediumpurple;
				border-bottom: 1px solid white;
			}
			.sub>li:hover{
				background: red;
			}
			.sub{
				display: none;
			}
			.nav>.current>span{
				transform: rotate(90deg);
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//监听一级菜单的点击事件
				$(".nav>li").click(function(){
					//拿到二级菜单
					var $sub = $(this).children(".sub");
					//展开二级菜单
					$sub.slideDown(1000);
					//拿到所有非当前的二级菜单
					var otherSub = $(this).siblings().children(".sub");
					//让所有非当前的二级菜单收起
					otherSub.slideUp(1000);
					//让被点击的一级菜单箭头旋转
					$(this).addClass("current");
					//让所有非被点击的一级菜单箭头还原
					$(this).siblings().removeClass("current");
				});
			});
		</script>
	</head>
	<body>
		<ul class="nav">
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.nav{
				list-style: none;
				width: 300px;
				height: 50px;
				background: red;
				margin: 100px auto;
			}
			.nav>li{
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				float: left;
			}
			.sub{
				list-style: none;
				background: mediumpurple;
				display: none;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，再执行动画
				 */
				//1.监听一级菜单移入事件
				$(".nav>li").mouseenter(function(){
					//拿到二级菜单
					var $sub = $(this).children(".sub");
					//停止当前正在运行的动画
					$sub.stop();
					//展开二级菜单
					$sub.slideDown(1000);
				});
				//2.监听一级菜单移出事件
				$(".nav>li").mouseleave(function(){
					//拿到二级菜单
					var $sub = $(this).children(".sub");
					//停止当前正在运行的动画
					$sub.stop();
					//收起二级菜单
					$sub.slideUp(1000);
				});
			});
		</script>
	</head>
	<body>
		<ul class="nav">
			<li>一级菜单
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单</li>
			<li>一级菜单</li>
		</ul>
	</body>
</html>

淡入淡出动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				background: red;
				display: none;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$("div").fadeIn(1000,function(){
						alert("淡入完毕");
					});
				});
				$("button").eq(1).click(function(){
					$("div").fadeOut(1000,function(){
						alert("淡出完毕");
					});
				});
				$("button").eq(2).click(function(){
					$("div").fadeToggle(1000,function(){
						alert("切换完毕");
					});
				});
				$("button").eq(3).click(function(){
					$("div").fadeTo(1000,0.2,function(){
						alert("淡入完毕");
					})
				});
			});
		</script>
	</head>
	<body>
		<button>淡入</button>
		<button>淡出</button>
		<button>切换</button>
		<button>淡入到</button>
		<div></div>
	</body>
</html>

弹窗广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗广告</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.ad{
				position: fixed;
				right: 0;
				bottom: 0;
				display: none;
			}
			.ad>span{
				display: inline-block;
				width: 30px;
				height: 30px;
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//监听span的点击事件
				$("span").click(function(){
					$(".ad").remove();
				});
				//执行广告动画
				/* $(".ad").slideDown(1000,function(){
					$(".ad").fadeOut(1000,function(){
						$(".ad").fadeIn(1000);
					});
				}); */
				$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
			});
		</script>
	</head>
	<body>
		<div class="ad">
			<img src="../img/弹窗广告.jpg" >
			<span></span>
		</div>
	</body>
</html>

自定义动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				margin-top: 10px;
				background: red;
			}
			.two{
				background: blue;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					/* $(".one").animate({
						width:500
					},1000,function(){
						alert("自定义动画执行完毕")
					}); */
					$(".one").animate({
						marginLeft:500
					},5000,function(){
						//alert("自定义动画执行完毕")
					});
					/* 
						第一个参数：接收一个对象，可以在对象中修改属性
						第二个参数：指定动画时长
						第三个参数：指定动画节奏，默认就是swing
						第四个参数：动画执行完毕之后的回调函数
					 */
					$(".two").animate({
						marginLeft:500
					},5000, "linear",function(){
						//alert("自定义动画执行完毕")
					});
				});
				$("button").eq(1).click(function(){
					$(".one").animate({
						width:"+=200"
					},1000,function(){
						alert("自定义动画执行完毕")
					});
				});
				$("button").eq(2).click(function(){
					$(".one").animate({
						//width: "hide"//隐藏宽度
						width:"toggle"
					},1000,function(){
						alert("自定义动画执行完毕")
					});
				});
			});
		</script>
	</head>
	<body>
		<button>操作属性</button>
		<button>累加属性</button>
		<button>关键字</button>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>
最爱琴女E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery基础教程05
08-23
jquery基础教程，总共分为10章，内容全面，讲解详细，是入门精通的好教程。
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
11-28
在本资源中，我们主要关注的是jQuery的基础教程，特别是关于操作文档对象模型（DOM）的部分。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个"Book05_jQuery_...
CoreJava_day05_all.zip_JavaScript/JQuery_Java_
08-11
在本压缩包“CoreJava_day05_all.zip”中，主要涵盖了JavaScript、jQuery以及Java的基础知识，这些都是编程领域中至关重要的技术。以下是这些技术的详细解释： **JavaScript**： JavaScript是一种广泛应用于网页和...
JQuery经典实例
07-14
1. **jQuery基础（Lesson01 jQuery基础）** 在这一部分，你会学习到如何引入jQuery库，理解jQuery的基本语法结构，如`$`符号的使用，以及如何使用`$(document).ready()`函数确保代码在页面加载完毕后执行。此外，还...
CSS 创建：从入门到精通
wjs2024的博客
07-24 421
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
CSS实现表格无限轮播
像鱼的博客
07-24 285
在React中，用CSS实现表格无线轮播
CSS全部标签属性重置语法
爱酷码的博客
07-24 258
每个浏览器默认的属性不同，像谷歌浏览器不设置的话，默认每个元素是有外边距margin的，有的浏览器列表还会带上序号，有的浏览器就没有。所以为了让所有浏览器都一致，在写CSS开始前，我们都需要用CSS把全部标签属性重置一次，艾米自用的重置CSS代码分享给大家。
Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-20 1104
本文主要记录图片九宫格与非九宫格展示效果动态切换的实现过程；
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3383
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
汤一飞
07-25 1090
iframe 预览邮件 + 打印邮件 + 模拟滚动条
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 1051
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）
柯晓楠
07-24 1175
我们实现了一个基于 HTML 和 ECharts 的监控平台数据可视化大屏。这个大屏不仅能够直观地展示监控数据，还能通过交互功能提升用户体验。希望本文能对你在实现类似项目时提供一些帮助和启发。
html-docx-js和file-saver实现html导出word
FE小白的进化之路
07-24 260
【代码】html导出word。
前端开发知识(一)-html
modi000的博客
07-24 479
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
【HTML — 构建网络】HTML 中的元数据
07-24 898
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
基于 HTML+ECharts 实现智慧景区数据可视化大屏（含源码）
柯晓楠
07-24 1310
随着旅游业的蓬勃发展，智慧景区的概念逐渐深入人心。通过数据可视化，景区管理者可以实时监控游客流量、设施使用情况以及环境状况，从而提升游客体验和管理效率。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的智慧景区数据可视化大屏。
HTML 跨平台使用同一套 emoji (twemoji) + 实现 emoji 选择
最新发布
汤一飞
07-25 969
这个需要耐心, 这些个字符千奇百怪, 有的字符电脑系统不支持不能渲染出来, 有的字符后面需要接一个空格, 有的字符看上去只有一位但实际占了多位, 最多的还是由多种字符组合显示成一个表情的(字符人, 可加修饰字符: 性别, 发型, 职业, with another one …在网页版 whatsapp 上聊天, 一栏栏地点选表情, 发送, 复制下来, 此时接收到的内容已经是字符了, 把这些字符按顺序提取为数组;输入框接收选中表情, 加入到输入框中。输入框 div 相关事件。引入 twemoji。
基于 HTML+ECharts 实现智慧工地数据可视化大屏（含源码）
柯晓楠
07-24 1067
智慧工地可视化大屏，可以结合BIM（建筑信息模型，Building Information Modeling，形容那些以三维图形为主的电脑辅助设计）、物联网等技术，将各种施工工地控制器数据，融合至智慧工地可视化大屏中，即时、合理、精确的反映施工工地的状况。保持了智慧工地数据信息内容集成化、数据统计分析的功效，合理提高了新项目品质，做到工地智慧管理方法、智慧管理决策的目的，提升建筑项目当场管理信息化水准，进而逐渐保持绿色工地、安全工地。
jQuery基础与选择器教程
"jQuery基础+选择器.pdf 是一本关于jQuery的入门教程，涵盖了jQuery的基本用法和选择器的详细讲解。作者是前端开发者王子墨，该书提供了丰富的前端开发知识，适合初学者学习jQuery框架。" jQuery是一个轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值