햄찌개

JQUERY - mouse이벤트 연습 본문

UI설계 및 구현 -웹프로그래밍

JQUERY - mouse이벤트 연습

햄찌개 2020. 10. 5. 11:17

mousemove를 이용하여 마우스 위치좌표 찾기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){
	   $(document).mousemove(function(e){
	      $('#Log').html('X좌표 : '+e.pageX +', Y좌표 : '+ e.pageY);
	   });
	});

</script>
<style type="text/css">
body{
background-color: #ecf;
}
div{
padding: 20px;
}
</style>
</head>
<body>
<div id ="Log"></div>
</body>
</html>

 

mouseover, mouseout를 이용하여 image 변경

dblclick을 이용하여 더블클릭시 해당 image 사라지고 전부 사라지면 버튼이보임

버튼 더블클릭시 image 전부 보이기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	var img1 = "../../image/man.gif";
	var orgsrc;	//원본 img담을 변수

	$(document).ready(function() {
		$("#showBtn").hide();
		//이미지에 마우스 올리면 다른 이미지
		$('img').mouseover(function() {
			orgsrc = $(this).attr("src");
			$(this).attr("src", img1);
		});
		//이미지에서 마우스 내리면 원본 이미지
		$('img').mouseout(function() {
			$(this).attr("src", orgsrc);
		});
		//이미지 더블클릭시 이미지가 사라짐
		$('img').dblclick(function() {
			$(this).hide();
			//이미지가 모두 사라지면 버튼이 보인다.
			if ($('img:visible').length == 0) {
				$("#showBtn").show();
			}

		});
		//이지마가 모두 사라지면 이미지 하단에[보이기]button이 나타남
		$("#showBtn").dblclick(function() {
			$('img').show();
			$("#showBtn").hide();
		});

	});
</script>
</head>
<body>
	<img src="../../image/coffee.jpg" width="200px" >
	<img src="../../image/1.png" width="200px" >
	<img src="../../image/2.png" width="200px" >
	<img src="../../image/banana.jpg" width="200px" >
	<br>
	<br>
	<button id="showBtn">보이기 버튼</button>

</body>
</html>

커피에 마우스 올리기

커피 더블클릭으로 삭제

이미지 더블클릭으로 전부 삭제시 버튼 출력

버튼 더블클릭시 이미지 전부 재 출력

저작자표시

'UI설계 및 구현 -웹프로그래밍' 카테고리의 다른 글

JQUERY - 애니메이션 연습 - fade  (0) 2020.10.06
JQUERY - 애니메이션 연습 - hide, show  (0) 2020.10.06
JQUERY - input type 연습  (0) 2020.09.29
jQuery -외부 내부 적용  (0) 2020.09.28
JAVASCRIPT -연습  (0) 2020.09.25
'UI설계 및 구현 -웹프로그래밍' Related Articles more