事件&动画

最新推荐文章于 2022-03-24 00:48:10 发布

代码小白吃chi

最新推荐文章于 2022-03-24 00:48:10 发布

阅读量60

点赞数

分类专栏： java jquery html 文章标签： jquery

本文链接：https://blog.csdn.net/qq_65149711/article/details/123665827

版权

java 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		 <style type="text/css">
		 	#aa{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			p{
				text-align: center;
				background-color: #FF0000;
			}
			.abc{
				/* 旋转度数 */
				transform: rotate(720deg);
				/* 时间 */
				transition: all 2s; 
			}
		 </style>
			<script type="text/javascript">
				// 一.事件
				/* // 1.1 加载DOM两种方式(区别)
				//1、jQuery库低版本jQuery快 高版本js快
				//2、widow.onload只能写一个不然会覆盖 jQuery可以写多个
				window.onload=function(){
					console.info("js方式");
				}
				 $(function(){
					console.info("jQuery方式");
				}) */
				
				$(function(){
					/* //1.2绑定事件的两种方式(点击、悬停事件)
					//元素.on/bind()
 					//$("#aa").on("click",function(){
 					//	alert(1);
					// })
 					//$("#aa").click(function(){
 					//	alert(1);
					// })
					
					//$("#aa").bind("mouseover",function(){
 					//	alert(1);
 					//})
 					//$("#aa").mouseover(function(){
 					//	alert(1);
 					//}) */
					
					/* // 1.3合成事件/事件切换
					// hover()悬停控制元素显示和隐藏
					// $("#a").hover(function(){//鼠标移上事件
						// $("#aa").show();//显示
					// },function(){//鼠标移出事件
						// $("#aa").hide();//隐藏
					// })
					
					//toggle()点击控制元素[div]的显示隐藏[注意版本问题]
					// $("#a").toggle(function(){//鼠标移上事件
						// $("#aa").show();//显示
					// },function(){//鼠标移出事件
						// $("#aa").hide();//隐藏
					// })
					//1.9版本之后的toggle()
					// $("#aa").toggle(1000);//1s */
					
					
					/* //1.4事件的传播(事件冒泡)小p-->中div-->大body
					//依次添加点击事件
					$("p").click(function(){
						console.info("p");
					})
					$("div").click(function(){
						console.info("div");
						return false;//阻止传播
					})
					$("body").click(function(){
						console.info("body");
					}) */
					
					/* // 1.5事件event的坐标[了解即可 pagex,pagey]
					$("#aa").on("click",function(e){
						console.info(e.pageX,e.pageY);
					}) */
					
					//1.6事件的移除
					//按钮只能点击一次
// 					$("#btn").click(function(){
// 						console.info(1);//做一系列事情
// 						//将该点击事件移除
// 						$("#btn").unbind("click");
// 						//将按钮禁用
// 						$("#btn").prop("disabled",true);
// 					})

					//一次事件
// 					$("#btn").one("click",function(){
// 						console.info(1);
// 						//将按钮禁用
// 						$("#btn").prop("disabled",true);
// 					})

					
					/* // 按钮点击偶数次数
					var i=1;
					$("#btn").click(function(){
						if(i%2==0){//偶数次
							console.info(i);
						}
						i++;
					}) */
					
					// 二 动画
					/* //2.1 基本动画
					$("#aa").hide();//默认隐藏
					$("#xx").click(function(){
						$("#aa").show(1000,function(){
							//回调函数
							alert(1);
						});//1s
					})
					
					$("#yy").click(function(){
						$("#aa").hide(1000);//1s
					})
					
					$("#zz").click(function(){
						$("#aa").toggle(1000);//1s
					}) */
					
					/* // 2.2 滑动动画
					$("#aa").hide();//默认隐藏
					$("#xx").click(function(){
						$("#aa").slideDown(1000);//1s
					})
					
					$("#yy").click(function(){
						$("#aa").slideUp(1000);//1s
					})
					
					$("#zz").click(function(){
						$("#aa").slideToggle(1000);//1s
					}) */
					
					/* //2.3淡入淡出(透明度)
					$("#aa").hide();//默认隐藏
					$("#xx").click(function(){
						$("#aa").fadeIn(1000);//1s
					})
					
					$("#yy").click(function(){
						$("#aa").fadeOut(2000);//2s
					})
					
					$("#zz").click(function(){
						$("#aa").fadeTo (1000);//1s
					}) */
					
					//2.4自定义动画
					/* //缩放
					$("#bb").click(function(){
						$("#aa").animate({
							// 属性:属性值 如果用px要加双引号
							width:100,
							height:300
						},1000)
					}) */
					
					//移动[2]
					/* //在自身基础上移动
					$("#bb").click(function(){
						$("#aa").animate({
							top:"+=5",
							left:"+=10"
						},10)
					}) */
					
					$("#bb").click(function(){
							$("#aa").addClass("abc");
					})
					
				})
	
			</script>
	</head>
	<body>
		
		<a href="#" id="a" style="text-decoration: none;">显示</a>
		<input type="button"  value="点击" id="btn"/>
		<button type="button" id="xx">显示(展开)(淡入)</button>
		<button type="button" id="yy">隐藏(收缩)(淡出)</button>
		<button type="button" id="zz">显示和隐藏的切换</button>
		<button type="button" id="bb">bbbbb</button>
		
		<div id="aa">
			<br />
			<p>1</p>
		</div>
	</body>
</html>

代码小白吃chi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件&动画

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #aa{ .
复制链接

扫一扫