본문 바로가기
프로그래밍/Jquery

2021년 10월 5일 - hover, transform - rotate, scale, translate & parent(), siblings(), children(), next(), prev(): & fade in, fade out & animate

by 철제백조 2021. 10. 5.

☆ 폼 태그 복습

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">

<style type="text/css">
	
	body * {
		font-family: 'Nanum Pen Script', cursive;
		font-size: 13pt;
	}
	
	table {
		border: 1px solid gray;
		border-collapse: collapse;
	}
	
	th, td{
		border: 1px solid gray;
	}
	
	th {
		width: 100px;
		background-color: #ffc;
	}
	
	#result{
		margin-top: 30px;
		width: 400px;
		height: 300px;
		padding: 10px 10px;
		border: 2px groove gray;
	}
	
</style>

<script type="text/javascript">

	/* document.ready랑 같음 */
	$(function(){
		
		//핸드폰 4글자 입력시 다음칸으로 커서가 이동
		$('#hp2').keyup(function(){
			if($(this).val().length==4){
				$('#hp3').focus();
			}
		});
		
		//버튼클릭시 정보읽어서 출력
		//글자색은 값출력도 하고 적용도 할것
		$("#btn").click(function(){
			
			var s="";
			s="이름: " + $("#name").val()+"<br>";
			s+= "연락처: " + $("#hp1 option:selected").text()+ "-" + $("#hp2").val()+ $("#hp3").val() +"<br>";

		
		//성별
		s+= "성별: " +$("input[name='gender']:checked").val()+"<br>";
		
		//글자색
		var fcolor= $("input[name='fcolor']:checked").val();
		s+= "글자색: " + fcolor + "<br>";
		
		//자격증
		var lic= "";
		$("input[name='lic']:checked").each(function(i,element){
			
			lic+= $(this).val()+"&nbsp;";
		});
		
		s+="자격증: " + (lic==""? "없음":lic);
		
		$("#result").html(s).css("color", fcolor);
		
		});
	});
</script>

</head>
<body>

	<b>폼태그 연습 #1</b>
	<table>
		<caption>개인정보</caption>
		<tr>
			<th>이름</th>
			<td><input type="text" id="name" size="7"></td>
		</tr>
		
		<tr>
			<th>연락처</th>
			<td>
				<select id="hp1">
					<option>010</option>
					<option>011</option>
					<option>017</option>										
					<option>019</option>
				</select>
				
				<b>-</b>
				<input type="text" id="hp2" maxlength="4" size="4">
				<b>-</b>
				<input type="text" id="hp3" maxlength="4" size="4">
			</td>
		</tr>
		
		<tr>
			<th>성별</th>
			<td>
				<input type="radio" name="gender" value="여자" checked="checked">여자
				<input type="radio" name="gender" value="남자">남자
			</td>
		</tr>
		
		<tr>
			<th>자격증</th>
			<td>
				<input type="checkbox" name="lic" value="운전면허">운전면허
				<input type="checkbox" name="lic" value="컴활 1급">컴활 1급
				<input type="checkbox" name="lic" value="정보처리기사">정보처리기사
			</td>		
		</tr>
		
		<tr>
			<th>글자색</th>
			<td>
				<input type="radio" name="fcolor" value="blue">파랑
				<input type="radio" name="fcolor" value="magenta">핫핑크
				<input type="radio" name="fcolor" value="orange">오렌지
				<input type="radio" name="fcolor" value="red">빨강
				<input type="radio" name="fcolor" value="black" checked="checked">검정
			</td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<button type="button" id="btn">선택정보 출력</button>
			</td>
		</tr>
	</table>
	
	<div id="result"></div>

</body>
</html>

 

 

 

☆ 폼 태그 복습2 ★★★★★

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	div.right{
		position: absolute;
		left: 300px;
		border: 10px solid gray;
		padding: 20px;
	}

</style>

</head>
<body>

	<div class="right">
		<img alt="" src="../image/01.png" style="max-width: 200px;">
	</div>
	
	<div class="left">
		<b>이미지 선택</b>
			<select id="selImage">
				<option value="../image/02.png">이미지1</option>
				<option value="../image/03.png">이미지2</option>
				<option value="../image/04.png">이미지3</option>
				<option value="../star/kojoonhee.jpg">고준희</option>
				<option value="../star/parkboyoung.jpg">박보영</option>
			</select>
			
		<br><br>
			
		<h4>테두리선 선택</h4>
		<input type="radio" name="line" value="dotted">점선
		<input type="radio" name="line" value="solid" checked="checked">실선
		<input type="radio" name="line" value="dashed">파선
		<input type="radio" name="line" value="groove">입체선
		
		<br><br>
		
		<b>박스그림자</b>
		<input type="checkbox" id="shadow">그림자 넣기
	</div>


<script type="text/javascript">

	//이미지를 선택하면 change 이벤트
	$("#selImage").change(function(){
		
		//var img = $(this).val();
		
		/* div 아래 클래스 right를 선택하는 방법 */
		$("div.right img").attr("src", $(this).val());
	});
	
	
	//테두리 선택시 click 이벤트(border-style 변경)
	$("input[name='line']").click(function(){
		
		$("div.right").css("border-style", $(this).val());
	});
	
	
	//섀도우 선택시 click 이벤트(box-shadow 5px 5px orange)
	$("#shadow").click(function(){
		
		//체크했을때 안했을때
		if($(this).is (":checked")){
			$("div.right").css("box-shadow", "5px 5px orange");
		} else{
			$("div.right").css("box-shadow", "");			
		}
	});
	
	//name으로 줬을 경우
	/* 	$("input[name='shadow']").click(function(){
		
		$("div.right").css("box-shadow", "5px 5px orange");
	})
 */	
</script>

</body>
</html>

 

 

 

☆ hover, transform - rotate, scale, translate

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<img alt="" src="../image/01.png">
	<img alt="" src="../image/02.png">
	<img alt="" src="../image/03.png">
	<img alt="" src="../image/04.png">


<script type="text/javascript">

	//첫번째 이미지 hover
	/* img와 eq사이 띄어쓰기 x */
	$("img:eq(0)").hover(function(){
		
		//45도 회전
		//angle은 각크기... 단위는 deg, rad, grad, turn(1회전 즉 360deg)
		$(this).css("transform", "rotate(180deg)");
		
	}, function(){
		
		$(this).css("transform", "rotate(0deg)");
	});

	
	//두번째 이미지에 ~45도 회전했다가 제자리
	$("img:eq(1)").hover(function(){
		
		//45도 회전
		$(this).css("transform", "rotate(-45deg)");
		
	}, function(){
		
		$(this).css("transform", "rotate(0deg)");
	})
	
	
	//세번째 이미지에 가로세로 2배확대했다가 다시 제자리
	//scale 요소로 확대축소 가능 - 1보다 큰수는 확대, 작으면 축소
	$("img:eq(2)").hover(function(){
		
		$(this).css("transform", "scale(2,2)");
		
	}, function(){
		
		//원래크기
		$(this).css("transform", "scale(1,1)");		
	});
	
	
	//translateX (50px): 오른쪽으로 50px이동, 만약 음수지정하면 왼쪽
	$("img:eq(3)").hover(function(){
		
		$(this).css("transform", "translate(50px, 50px)");
		
	}, function(){
		
		/* 제자리 */
		$(this).css("transform", "translate(0px, 0px)");
		
	})

	
</script>

</body>
</html>

 

 

 

☆ parent(), siblings(), children(), next(), prev():

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<div class="one">
		첫번째 div
			<div class="hana">하나</div>
			<div>둘</div>
			<div>셋</div>
			<h3>h3 Tag</h3>
			<h4>h4 Tag</h4>
	</div>


	<div class="two">
		두번째 div
			<div class="hana">하나</div>
			<div>둘</div>
			<div>셋</div>
			<h3>h3 Tag</h3>
			<h4>h4 Tag</h4>		
	</div>
	
	
<script type="text/javascript">

	//parent(): 부모태그
	//siblings(): 형제태그
	//children(): 자식태그
	//next(): 선택한 요소의 다음에 위치한 형제요소
	//prev(): 선택한 요소의 바로 이전에 위치한 형제요소

	$("div.one div.hana").siblings().css("color", "red");
	$("div").children("div.hana").css("text-decoration", "underline");
	$("div.hana").next().next().css("background-color", "orange");
	$("div.two").find("h3").css("border", "2px solid green");
	
	$("div.one").click(function(){
		
		$(this).siblings().find("div").hide();
		//$(this).siblings().find("div").hide("slow");	//천천히 사라짐
	});

	$("div.two").click(function(){
		
		$(this).find("div").show("slow");
	});

</script>	
</body>
</html>

 

 

 

☆ fade

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<button id="btn1">투명도 30%</button>
	<button id="btn2">투명도 100%</button>

	<h1>제목</h1>
	

<script type="text/javascript">

	$("#btn1").click(function(){
		
		//$("h1").fadeOut();	//아예 사라지기
		$("h1").fadeTo(1000,0.3);	//(밀리언초, 30%)
	});
	
	
	$("#btn2").click(function(){
		
		//$("h1").fadeIn();
		$("h1").fadeTo(1000,1);
	})

</script>
	
</body>
</html>

 

 

 

☆ fade in, fade out

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style type="text/css">

	body, ul, li{
		margin: 0;
		padding: 0;
	}

	div #logo{
		width: 250px;
		height: 130px;
		margin: 100px auto;
		cursor: pointer;
	}
	
	ul #list {
		width: 900px;
		margin-top: auto;
	}
	
	li {
		list-style: none;
		float: left;
		cursor: pointer;
		width: 150px;
		height: 230px;
		margin-left: 50px;
		margin-top: 250px;
	}

</style>

</head>
<body>

	<div id="wrap">
	
	<div id="logo"><img alt="제목" src="../image/미니언즈.jfif"></div>
	
	<ul id="list">
		<li><img alt="" src="../image/01.png"></li>
		<li><img alt="" src="../image/02.png"></li>
		<li><img alt="" src="../image/03.png"></li>
		<li><img alt="" src="../image/04.png"></li>
		<li><img alt="" src="../image/05.png"></li>
		<li><img alt="" src="../image/06.png"></li>
	</ul>
	</div>
	
	
<script type="text/javascript">

	//각각 이미지 사라지게
	$("li img").click(function(){
		$(this).fadeOut();
	});
	
	//제목누르면 이미지 다시 나타나게
	$("#logo").click(function(){
		$("li img").fadeIn().css('border', '2px dashed pink');
	})

</script>	
</body>
</html>

 

 

 

☆ hover

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	ul, li{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	ul li{
		float: left;
		width: 150px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border: 1px solid tomato;
		margin: 0 5px;
	}
	
	.bg{
		background: tomato;
		color: #fff;
	}

</style>
</head>
<body>

	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>
		<li>메뉴4</li>
	</ul>


<script type="text/javascript">

	$("ul li").hover(function(){
		$(this).addClass("bg");
		
	}, function(){
		
		$(this).removeClass("bg");
	});

</script>
</body>
</html>

 

 

 

☆ 서브메뉴 만들기 ★★★

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	div.sist {
		position: absolute;
		left: 300px;
		width: 250px;
		height: 300px;
		border: 2px groove gray;
		border-radius: 30px;
		top: 100px; 
	}
	
	ul li{
		list-style: none;
	}
	
	ul.menu>li {
		font-size: 2em;
		font-family: "Nanum Pen Script";
		font-weight: bold;
		cursor: pointer;
	}
	
	ul.submenu>li{
		font-size: 24px;
		font-family: 'Gaegu';
	}
	
	ul.submenu>li{
		color: yellow;
	}

</style>

<script type="text/javascript">

	$(function(){
		
		//모든 서브메뉴 숨기기
		$("ul.submenu").hide();
		
		//메인메뉴명 클릭시 해당메뉴의 서브메뉴가 나타나게 하기
		$("ul.menu>li").click(function(){
			
			$(this).find("ul.submenu").show("slow");
			
			//다른 서브메뉴 선택시 기존 서브메뉴들은 모두 숨긴다
			$(this).siblings().find("ul.submenu").hide("slow");

		});
		
	})

</script>

</head>
<body>

	<div class="sist">
		<ul class="menu">
			<li>File
				<ul class="submenu">
					<li>New</li>
					<li>Open</li>
					<li>Save</li>
					<li>Rename</li>					
				</ul>
			</li>
			
			<li>Edit
				<ul class="submenu">
					<li>Cut</li>
					<li>Copy</li>
					<li>Paste</li>
					<li>Delete</li>
				</ul>
			</li>
			
			<li>Help
				<ul class="submenu">
					<li>Search</li>
					<li>Install</li>
					<li>Market</li>
					<li>Donate</li>
				</ul>
			</li>
		</ul>
	</div>

</body>
</html>

 

 

 

☆ 서브메뉴 만들기 - 가로 ★★★★★

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	div.sist {
		position: absolute;
		left: 300px;
		width: 250px;
		height: 300px;
		border: 2px groove gray;
		border-radius: 30px;
		top: 100px; 
	}
	
	ul li{
		list-style: none;
	}
	
	ul.menu>li {
		font-size: 2em;
		font-family: "Nanum Pen Script";
		font-weight: bold;
		cursor: pointer;
	}
	
	ul.submenu>li{
		font-size: 24px;
		font-family: 'Gaegu';
	}
	
	ul.submenu>li{
		color: yellow;
	}

</style>

<script type="text/javascript">

	$(function(){
		
		//모든 서브메뉴 숨기기
		$("ul.submenu").hide();
		
		//메인메뉴명 클릭시 해당메뉴의 서브메뉴가 나타나게 하기
		$("ul.menu>li").click(function(){
			
			$(this).find("ul.submenu").show("slow");
			
			//다른 서브메뉴 선택시 기존 서브메뉴들은 모두 숨긴다
			$(this).siblings().find("ul.submenu").hide("slow");

		});
		
	})

</script>

</head>
<body>

	<div class="sist">
		<ul class="menu">
			<li>File
				<ul class="submenu">
					<li>New</li>
					<li>Open</li>
					<li>Save</li>
					<li>Rename</li>					
				</ul>
			</li>
			
			<li>Edit
				<ul class="submenu">
					<li>Cut</li>
					<li>Copy</li>
					<li>Paste</li>
					<li>Delete</li>
				</ul>
			</li>
			
			<li>Help
				<ul class="submenu">
					<li>Search</li>
					<li>Install</li>
					<li>Market</li>
					<li>Donate</li>
				</ul>
			</li>
		</ul>
	</div>

</body>
</html>

 

 

 

☆ 버튼별 이벤트 모음 ★★

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<button type="button" id="btn1">Hide</button>
	<button type="button" id="btn2">Show</button>
	<button type="button" id="btn3">Toggle</button>

	<br>
	
	<button type="button" id="btn4">Slide Up</button>
	<button type="button" id="btn5">Slide Down</button>
	<button type="button" id="btn6">Slide Toggle</button>
	
	<br>
	
	<button type="button" id="btn7">Fade Out</button>
	<button type="button" id="btn8">Fade In</button>
	<button type="button" id="btn9">Fade Toggle</button>
	<button type="button" id="btn10">Fade To</button>
	
	<div id="msg">Have a Nice Day!!</div>
	<img alt="" id="img1" src="../image/01.png">


<script type="text/javascript">

	$("#btn1").click(function(){
		
		$("#msg").hide();
		$("#img1").hide();
	})
	
	$("#btn2").click(function(){
		
		$("#msg").show();
		$("#img1").show();
	})

	$("#btn3").click(function(){
		
		$("#msg").toggle();
		$("#img1").toggle();
	})

	$("#btn4").click(function(){
		
		$("#msg").slideUp("slow");
		$("#img1").slideUp("slow");
	})

	$("#btn5").click(function(){
		
		$("#msg").slideDown("slow");
		$("#img1").slideDown("slow");
	})

	$("#btn6").click(function(){
		
		$("#msg").slideToggle("slow");
		$("#img1").slideToggle("slow");
	})

	$("#btn7").click(function(){
		
		$("#msg").fadeOut();
		$("#img1").fadeOut();
	})

	$("#btn8").click(function(){
		
		$("#msg").fadeIn();
		$("#img1").fadeIn();
	})

	$("#btn9").click(function(){
		
		$("#msg").fadeToggle();
		$("#img1").fadeToggle();
	})

	$("#btn10").click(function(){
		
		//3초동안 반투명이 된후 함수실행
		$("#msg").fadeTo(3000,0.5, function(){
			
			$("#msg").css("border", "10px dotted orange")
		});
		
		$("#img1").fadeTo(3000,02, function(){

			$(this).css("opacity", "0.5");
		});
	})
	
</script>	
</body>
</html>

 

 

 

☆ animate ★★★★

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	#one{
		position: relative;
		width: 50px;
		height: 50px;
		background-color: pink;
		border: 1px solid magenta;
	}

</style>
</head>
<body>

	<img alt="" src="../image/01.png" id="img1" width="100">

	<hr>
	
	<div id="one"></div>


<script type="text/javascript">

	$("#img1").animate({width:'200px', opacity:'0.5'}, 'slow');
	$("#img1").animate({width:'200px', opacity:'1'}, 'slow', function(){
		
		//애니메이션이 끝난 후 처리
		alert("끝났어요!!");
		
		$(this).after("<b>THE END</b>");
	});
	
	
	$("#one").animate({left:"+=60"},2000).animate({"borderWidth":"10px"},2000).animate({width:"120px"},2000).animate({height:"120px"},2000);

</script>
</body>
</html>

'프로그래밍 > Jquery' 카테고리의 다른 글

2021년 10월 8일 - 응용 & 부트스트랩 - modal & MySQL  (0) 2021.10.08
2021년 10월 7일 - trigger & zindex & 전체 이미지에서 일부만 불러오기 & 테이블 형식 클래스 추가 제거 & 미니언즈 게임 제작  (0) 2021.10.07
2021년 10월 6일 - figure & 배열 each & Animate, delay & onEvent  (0) 2021.10.06
2021년 10월 1일 - Form Tag & hover & each 함수 & form - select, checkbox, radio & append & after  (0) 2021.10.01
2021년 9월 30일 - JQery - add, attr & eq, append & 클릭 이벤트 & addClass, removeClass, toggleClass & mouseOver, mouseOut & RGB 창 구현  (0) 2021.09.30

관련글

댓글

티스토리툴바