jQuery(제이쿼리) 강좌와 예제모음

클릭할때마다 줌을 당겨보자 (이미지 확대술)

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :

뜬금 소스

우연한 기회로 전 직장에서 일본에 파견을 다녀온적이 있었습니다.
본사로 파견을 간 것인데요. 팀장님과 둘이 재미있게 다녀왔습니다.
한달반의 기간동안 관광도 많이 다녔습니다. 그래도 현실은 외국인 노동자 였죠. 야근까지.

그때 찍은 사진을 정리하다가 문득 이런거 해보면 재밌겠다 해서
만들어본 예제입니다. 좀 다듬어서 실제로 사용하려고 합니다.

소스의 기능은 아주 단순하며 완성도는 좀... ^^;;;
이 예제를 만들어가는 과정에 대한 것은 곧 올려보겠습니다.
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

아래 사진을 계기로 소스를 만들었습니다

에노시마라는 섬의 절벽에 있는 집, 흉가?

위 집이 있는 장소를
지도를 캡쳐한 이미지를 사용해서 찾아보겠습니다.
확대해서 하나씩 들어가는 그런 방식으로요.
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

위 사진의 장소를 추적해 보겠습니다

아래 이미지를 클릭해 주세요.


등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

소스입니다

그냥 당장 사용해보고 싶어서 만들어 본 소스라서 좀 대충입니다.
의외로 만들기 어려웠습니다. 다음 이미지 로딩이 늦어서 붕 떠보이는 문제도 있었구요.
하지만 잘 해결된 소스입니다. 걍 될 때까지 해보는 거죠. ^^;;

* 간단한 설명
- 이미지는 div 에 배경으로 설정하고 확대시키는 방법을 사용.
- 이미지는 일일이 캡쳐해 가면서 제작. 이게 더 힘드네요. ㄷㄷ
- 로딩문제 때문에 이미지 갯수만큼 미리 로딩해둠.
- 무한 반복되는 구조. 최대 확대 후 다시 원상복귀.
- CSS와 제이쿼리, HTML 요소가 어우러진 적절한 예제 (종합선물세트)
- 그리고 간단한 로직.

CSS

.gogogo {
	width:1200px;
	height:605px;
	border:5px solid #666;
	border-radius:5px;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}

.gogogo div {
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
}

HTML

<div class="gogogo" onclick="gogogo()">
	<div class="max-zoom" style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/1.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/2.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/3.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/4.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/5.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/6.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/7.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/8.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/9.jpg');"></div>
</div>

자바스크립트

var is_last = false;

function gogogo(){

	var el = $('.gogogo div:last');

	// 현재 확대가 실행중이면 재실행 안되게 멈춘다 (연타시 오작동 방지)
	if(el.queue().length > 0) return;


	// 현재 그림이 최대줌(마지막) 상태면 처음부터 반복하기 위해 셋팅
	if(is_last){
		$(el).css({'background-size':'100%'});
		$('.gogogo').find('div:first').before(el);
		el = $('.gogogo div:last');
		is_last = false;
	}

	el.animate({'background-size':'+=150%'}, 500, 'linear', function(){

		// 최대줌(마지막)이면 멈춘다
		if($(this).hasClass('max-zoom')){
			is_last = true;
			return;
		}

		$(this).css({'background-size':'100%'});
		$('.gogogo').find('div:first').before(this);

	});
}

실행 가능한 소스

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

★★★ 확장판 ★★★

이것은 확장판 입니다. ^^;;
확대시 최대한 잘 맞는 비율이 되로록
세부 설정이 가능하게 소스를 개선해야 할 것 같습니다.

CSS

.gogogo {
	width:1200px;
	height:605px;
	border:5px solid #666;
	border-radius:5px;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}

.gogogo div {
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
}

HTML

<div class="gogogo" onclick="gogogo()">
	<div class="max-zoom" style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/1.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/2.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/3.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/4.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/5.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/6.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/7.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/8.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/9.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/10.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/11.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/12.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/13.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/14.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/15.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/16.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/17.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/18.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/19.jpg');"></div>
	<div style="background-image:url('http://mabinogi.filamt.com/ktsmemo/jquery/20.jpg');"></div>
</div>

자바스크립트

var is_last = false;

function gogogo(){

	var el = $('.gogogo div:last');

	// 현재 확대가 실행중이면 재실행 안되게 멈춘다 (연타시 오작동 방지)
	if(el.queue().length > 0) return;


	// 현재 그림이 최대줌(마지막) 상태면 처음부터 반복하기 위해 셋팅
	if(is_last){
		$(el).css({'background-size':'100%'});
		$('.gogogo').find('div:first').before(el);
		el = $('.gogogo div:last');
		is_last = false;
	}

	el.animate({'background-size':'+=150%'}, 500, 'linear', function(){

		// 최대줌(마지막)이면 멈춘다
		if($(this).hasClass('max-zoom')){
			is_last = true;
			return;
		}

		$(this).css({'background-size':'100%'});
		$('.gogogo').find('div:first').before(this);

	});
}

실행 가능한 소스

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :