본문 바로가기
JAVASCRIPT & JQUERY

[Jquery] 마우스 hover 시, 확대 기능 방법!!

by GoodDayDeveloper 2021. 4. 26.
반응형

안녕하세요. 오늘은 이미지에 마우스 hover시, 이미지가 줌(확대)가 되는 기능에 대해 알아보겠습니다.

간단한 방법인데 구글링에서 구체적인 방법이 나오지 않는 것 같아 정리해서 올려봅니다.

제가 구현한 화면입니다. 이미지에 마우스를 올리면 자동으로 줌이 되면서 움직이며 내용을 확인할 수 있습니다.

 


우선 제이쿼리 사이트에가서 줌 기능에 대한 파일을 받아야합니다.

 

제이쿼리 사이트 : jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

플로그인에서 

 

제이쿼리를 선택합니다.

 

그리고 4번째 페이지에 zoom이 있습니다. 

 

여기서 Download now를 클릭하고 파일을 받습니다.

 

그리고 압축을 풀어서 파일을 보게되면 jquery.zoom.js 이란 파일이 있습니다. 

이것을 프로젝트의 원하는 저장공간에 넣어줍니다.

 

 

JSP

 

jsp 코드입니다. 

우선 제이쿼리 주소를 선언하여 제이쿼를 사용할 수 있도록 합니다.

그리고 jquery.zoom.js 파일을 넣었던 주소를 넣어줍니다.

스크립트에서는 div의 id값이 zoom이 zoom기능이 될 수 있도록 하고

div에서는 스크립트에서 사용할 수 있도록 id값을 넣어주기만하면 됩니다.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery.zoom.js" ></script>

<script>
	$(document).ready(function(){
		$("#zoom").zoom();
	});
</script>

<body>
	<div id="zoom" style="text-align:center;">
	<img src="/images/test1.jpg" style="width:200px;" />
	</div>
</body>

 

반응형

댓글