안녕하세요. 오늘은 이미지에 마우스 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>
'JAVASCRIPT & JQUERY' 카테고리의 다른 글
| [Javascript] SNS 공유 방법!! (카카오톡,페북,트윗,밴드) (0) | 2021.08.13 |
|---|---|
| [JQuery] 쿠키로 아이디 저장하는 방법!! (3) | 2021.08.07 |
| [Jquery&Javascript] 페이지 URL 복사 방법!! (0) | 2021.04.08 |
| [정규식] input숫자만입력&콤마적용 방법!! (1) | 2021.03.25 |
| [Jquery] selectbox & radio 선택 유지하는 방법 (0) | 2021.03.24 |
댓글