jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 )
Open API/Jquery2016. 11. 10. 09:11
반응형
간편하게 적용할 수 있는 줌 관련 기능 플러그인입니다.
Plugin Url : http://www.jacklmoore.com/zoom/
미리보기 : http://www.uhoon.co.kr/test/548.html
줌기능을 아래의 경우에 적용할 수 있습니다.
- 마우스 오버 시
- 클릭시 토글
- 클릭하고 있는 동안
- 클릭한 부분 줌
- 휠 밀고 당기고
샘플코드 다운로드 : 
548.zip
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery Zoom Demo</title>
<style>
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url("./548/grab.cur"), default; }
#ex2 img:active { cursor: url("./548/grabbed.cur"), default; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src='./548/jquery.zoom.js'></script>
<script src='./548/jquery.Wheelzoom.js'></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
$('#ex5').wheelzoom();
// $('#ex5').wheelzoom({zoom:0.05});
// $('#ex5').trigger('wheelzoom.reset')
});
</script>
</head>
<body>
<div>
<div class='zoom' id='ex1'>
<img src='548/daisy.jpg' id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>마우스 올려보세요</p>
</div>
</div>
<div>
<div class='zoom' id='ex2'>
<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>클릭된 동안 땡겨짐</p>
</div>
</div>
<div>
<div class='zoom' id='ex3'>
<img src='548/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>클릭하면 줌 작동 토글</p>
</div>
</div>
<div>
<div class='zoom' id='ex4'>
<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>클릭한 부분 땡겨짐 토글</p>
</div>
</div>
<div>
<div class='zoom' >
<img id='ex5' src='548/daisy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>휠땡기고 밀고</p>
</div>
</div>
</body>
</html>
댓글()
