본문 바로가기

Javascript/Jquery

마우스 오버시 이미지 확대

반응형
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                 
                var xOffset = 0;
                var yOffset = 10;

                $(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
					var bottom = $(window).height() - e.clientY; // bottom을 기준으로 마우스 좌표 알아내기 (현재 창 높이 - 현재 마우스 좌표)
					$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='300px' /></p>"); //보여줄 이미지를 선언	
					if(bottom <= 220){		// 현재 마우스위치가 bottom에서부터 220 이하 일때 발동
					$("#preview")
						.css("top",(e.pageY - 220) + "px")
						.css("left",(e.pageX + yOffset) + "px")
						.fadeIn("fast"); //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기 미리보기 화면 설정 셋팅
					}else{
						$("#preview")
						.css("top",(e.pageY - xOffset) + "px")
						.css("left",(e.pageX + yOffset) + "px")
						.fadeIn("fast"); //미리보기 화면 설정 셋팅
					}
				});
				
				$(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
					var bottom = $(window).height() - e.clientY;
					if(bottom <= 220){			 
						$("#preview")
							.css("top",(e.pageY - 220) + "px")
							.css("left",(e.pageX + yOffset) + "px")  //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기
					}else{
						$("#preview")
							.css("top",(e.pageY - xOffset) + "px")
							.css("left",(e.pageX + yOffset) + "px")
					}
				});

				$(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시
					$("#preview").remove();
				});
                 
			});
        </script>
            
		<style>
			/* 미리보기 스타일 셋팅 */
			#preview{
				z-index: 9999;
				position:absolute;
				border:0px solid #ccc;
				background:#333;
				padding:1px;
				display:none;
				color:#fff;
			}
			.test{
				background-color: yellow;
				padding : 500px;
			}
		</style>
    </head>
     
    <body>
		<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
		<div class="test"></div>
		<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
		<div class="test"></div>
    </body>
</html>

이 코드에서 마우스 오버시 이미지 출력 위치 수정하려면  0, 10, 220 숫자 값을 조절해주면 된다.

 

결과화면 (이미지가 상단에 있을 시)

 

결과화면 (이미지가 하단에 있을 시)

반응형

'Javascript > Jquery' 카테고리의 다른 글

마우스 오버시 이미지 확대  (0) 2020.08.04
table option selected(테이블 option 선택)  (0) 2020.07.18
jquery 테이블 정렬 코드  (0) 2020.07.08
Jquery 선택자  (0) 2020.05.21