• Open API/Jquery

    jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 )

    2016. 11. 10.

    by. Yo.

    728x90



    간편하게 적용할 수 있는 줌 관련 기능 플러그인입니다.



    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>


    728x90
    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바