My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 8421 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Plugin Url : http://www.jacklmoore.com/zoom/ 

Test Url :  http://www.uhoon.co.kr/test/548.html


 
  • 마우스 오버시 
  • 클릭시 토글
  • 클릭하고 있는 동안
  • 클릭한 부분 줌
  • 휠 밀고 당기고 




<!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>



줌전.png 줌후.png
?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
18 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
17 PlugIn 스크롤 따라 다니는 배너 file kay 2013.09.14 4517
16 PlugIn vGrid - 브라우저 너비에 따른 가변 그리드 1 kay 2013.04.08 6956
15 PlugIn Tree 메뉴만들기 1 file kay 2013.08.14 5642
14 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
13 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
12 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
11 PlugIn sliding horizontal parallax - parallax 공부 샘플 kay 2013.04.17 6151
10 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
9 PlugIn Moodular - 회전,슬라이더, 터치 ,모자이크 kay 2013.05.04 5352
8 PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
7 PlugIn lightBox2 - 레이어 팝업 file kay 2013.04.06 6109
6 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
» PlugIn jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 ) kay 2013.04.17 8421
4 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105350
3 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
2 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 2078
1 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
Board Pagination Prev 1 Next
/ 1