URL : https://ktsmemo.cafe24.com/s/jquery/312

등록일 : 2017년 12월 5일(화) 805일(약 3년) 전

뜬금 소스

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

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

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

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

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

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

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

위 사진과 관련된 글

일본 에노시마 관광 사진

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

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

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

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

소스입니다

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

* 간단한 설명
- 이미지는 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);

	});
}

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery(제이쿼리) 강좌와 예제모음 : 만들어보기 : 클릭할때마다 줌을 당겨보자 (이미지 확대술)</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/jquery/312" target="_blank">https://ktsmemo.cafe24.com/s/jquery/312</a>
</div>


<!-- 예제 시작 -->

<style type="text/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;
	}

</style>

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

<script>

	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);

		});
	}

</script>

<!-- 예제 종료 -->


</body>
</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 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);

	});
}

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery(제이쿼리) 강좌와 예제모음 : 만들어보기 : 클릭할때마다 줌을 당겨보자 (이미지 확대술)</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/jquery/312" target="_blank">https://ktsmemo.cafe24.com/s/jquery/312</a>
</div>


<!-- 예제 시작 -->

<style type="text/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;
}

</style>

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

<script>

	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);

		});
	}

</script>

<!-- 예제 종료 -->


</body>
</html>

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

방문해 주셔서 감사드립니다 !!

★ 각종 쉽고 편리한 계산기 링크 ★

만나이 계산기 띠동갑 계산기 디데이 계산기 기념일 계산기 날짜 +- 계산기 날짜 차이 계산기 수능 디데이 양력 → 음력 음력 → 양력 삼재