메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140813_[jquery] mouseover

2014.09.23 22:07 read.166

.mouseover(); , .mouseenter();

해당 영역에 마우스가 올라가는 것을 감지하는 이벤트


.mouseout(), .mouseleave();

해당 영역을 마우스가 벗어나느 것을 감지하는 이벤트


예제1

jq_mouseover_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				var imgArray=new Array("images/img_01.jpg","images/img_02.jpg","images/img_03.jpg")
				var n=1;
				var controller=setInterval(test,1000);
				
				function test(){
					$("img").fadeOut(1000,function(){
						$("img").attr("src",imgArray[n]);
						n++;
						if(n==imgArray.length){
							n=0;
						}
						$("img").fadeIn(1000);
					});
				}
				//$("div").click(function(){//클릭했을 때
				$("div").mouseover(function(){//마우스가 올라갔을때
					clearInterval(controller);//controller=setInterval(test,1000)를 멈워라
				});
				$("div").mouseleave(function(){
					clearInterval(controller);
					controller=setInterval(test,1000);
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
	</body>
</html>




추가메뉴 목록
위로