jQuery中的动画

淡忘728

已于 2022-10-18 13:15:51 修改

阅读量268

点赞数

文章标签： jquery 前端 javascript

于 2022-10-18 12:03:18 首次发布

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127339779

版权

1.css样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css优先级的优先顺序

Inline style（内联样式） > Internal style sheet（内部样式） > External style sheet（外部样式）！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

优先级：行内样式>内嵌样式>链接样式>浏览器默认样式

一、.addClass()方法，增加样式、用于动态增加class类名
1、.addClass(className) :为每一个匹配的元素增加一个或多个样式名
2、.addClass(function(index,currentClass)) :以函数形式返回一个或多个将要增加的样式名
二、removeClass(), 方法、删除样式、，用于动态删除class类名
三、toggleClass()方法、切换样式、包含addClass（）方法、removeClass（）方法的效果；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		#div1{
			width: 200px;
			height: 200px;
			background-color: greenyellow;
			margin: 10px auto;
		}	
		.c1{
			color: blueviolet;
			text-align: center;
			background-color: pink;
		}
		</style>
		<script src="js/jquery.min.js">
			//导入jQuery类库
		</script>
		<script type="text/javascript">
			//入口函数
			$(function(){
				
				$("#div1").click(function(){
					//更改样式，单样式使用css方法设置，样式很多推荐使用addclass()方法实现样式添加
					//$(this).css({"width":"300px","height":"300px","color":"red"});
					$(this).addClass("c1");
				});
			});
		</script>
	</head>
	<body>
		<div id="div1">
			这是一个div盒子
		</div>
	</body>
</html>

2.简单的自定义动画

在jQuery中，animate()方法可以用于创建自定义动画。其语法结构为:

$(selector).animate(styles,speed,easing,callback)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#content{
				width: 200px;
				height: 200px;
				border: 1px blue solid;
				margin: 10px auto;
				background-color: aquamarine;
			}
		</style>
		<script src="js/jquery.min.js">
			//导入类库
		</script>
		<script type="text/javascript">
			$(function(){
				$("#content").click(function(){
					//自定义动画:animate(样式，动画的速度，动画的效果，回调函数)
					$(this).animate({
						width:300,
						height:300,
					},1000);
				});
			});
			
		</script>
	</head>
	<body>
		<div id="content">
			
		</div>
	</body>
</html>

3.王者荣耀案例展示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*初始化样式*/
			* {
				margin: 0px;
				padding: 0px;
			}
			
			ul li {
				list-style: none;
			}
			
			#content {
				width: 800px;
				height: 69px;
				/*border: 1px blue solid;*/
				margin: 10px auto;
				padding: 10px;
				background: url(img/bg.png);
			}
			
			#content ul li {
				width: 69px;
				height: 69px;
				float: left;
				margin-left: 10px;
				overflow: hidden;
				/*border: 1px palevioletred solid;*/
				border-radius: 5px;
				/*设置边框的弧度*/
			}
			
			#content ul .current {
				width: 224px;
			}
			
			#content ul .current .big {
				display: block;
			}
			
			#content ul .current .small {
				display: none;
			}
			
			.small {
				width: 69px;
				height: 69px;
			}
			
			.big {
				display: none;
			}
		</style>
		<script src="js/jquery.min.js">
		</script>
		<script type="text/javascript">
			$(function() {
//				//基础版 设置鼠标放入li的事件
//				$("#content>ul>li").mouseover(function() {
//					//让当前li变宽，然后让里面的大图显示，小图隐藏
//					$(this).stop().animate({
//						width: 224,
//					});
//
//					$(this).find(".big").stop().fadeIn();
//
//					$(this).find(".small").stop().hide();
//
//					//让其他的li变窄，然后让里面的大图隐藏，小图显示
//
//					$(this).siblings().stop().animate({
//						width: 69,
//					});
//
//					$(this).siblings().find(".big").stop().hide();
//
//					$(this).siblings().find(".small").stop().fadeIn();
//				});
				//优化版 设置鼠标放入li的事件
				$("#content>ul>li").mouseover(function() {
					//让当前li变宽，然后让里面的大图显示，小图隐藏
					$(this).stop().animate({
						width: 224,
					}).find(".big").stop().fadeIn().siblings().stop().hide();
					//让其他的li变窄，然后让里面的大图隐藏，小图显示
					$(this).siblings().stop().animate({
						width: 69,
					}).find(".big").stop().hide().siblings().stop().fadeIn();
				});
			});
		</script>
	</head>

	<body>
		<div id="content">
			<ul>
				<li class="current"><img src="img/c.png" class="big" />
					<img src="img/c1.jpg" class="small" /></li>

				<li><img src="img/h.png" class="big" />
					<img src="img/h1.jpg" class="small" /></li>

				<li><img src="img/l.png" class="big" />
					<img src="img/c1.jpg" class="small" /></li>

				<li><img src="img/m.png" class="big" />
					<img src="img/m1.jpg" class="small" /></li>

				<li><img src="img/t.png" class="big" />
					<img src="img/t1.jpg" class="small" /></li>

				<li><img src="img/w.png" class="big" />
					<img src="img/w1.jpg" class="small" /></li>

				<li><img src="img/z.png" class="big" />
					<img src="img/z1.jpg" class="small" /></li>
			</ul>
		</div>
	</body>

</html>

4.元素的遍历、增加和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery操作页面元素</title>
		<script src="js/jquery.min (1).js">
		</script>
		<script type="text/javascript">
		$(function(){
			var jq = $("#content>ul>li");
//			//遍历jq对象
//			for (var i =0;i<jq.length;i++) {
//				var dom = jq[i];
//				alert(dom.innerText);
//			}
            $.each(jq, function(index,dom) {
            	alert(dom.innerText);
            });
			
		});
		</script>
	</head>
	<body>
		<h2>操作页面元素:页面元素的遍历、页面元素的增删</h2>
		<div id="content">
			<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柚子</li>
			<li>橙子</li>
			<li>榴莲</li>
		    </ul>
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面元素的增加和删除</title>
		<script src="js/jquery.min (1).js">
		</script>
		<script type="text/javascript">
			$(function(){
				//创建元素
				var li =$("<li>动态生成的");
				$("#btn1").click(function(){
					//在内部的前面添加元素
					$("#content ul").prepend(li);
				});
				$("#btn2").click(function(){
					//在内部的后面添加元素
					$("#content ul").append(li);
				});
				$("#btn3").click(function(){
					//在外部的前面添加元素
					$("#content ul").before(li);
				});
				$("#btn4").click(function(){
					//在外部的后面添加元素
					$("#content ul").after(li);
				});
				$("#btn5").click(function(){
					//删除元素
					$("#content ul").remove();//删除匹配的元素本身
					//$("#content ul").empty();//删除匹配的元素集合中所有的子节点
					//$("#content ul").html("苹果");//清空匹配的元素内容
				});
			});
		</script>
	</head>
	<body>
		<div id="content">
			<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柚子</li>
			<li>橙子</li>
			<li>榴莲</li>
		    </ul>
		</div>
		<button id="btn1">内部添加到前面</button>
		<button id="btn2">内部添加到后面</button>
		<button id="btn3">外部添加到前面</button>
		<button id="btn4">外部添加到后面</button>
		<button id="btn5">元素的删除</button>
	</body>
</html>