이번에 새로운 글 쓰기 시스템(현재 보시는 사이트)를 개발하고 강좌나 기타 여러 글쓰기에 적합한 틀을 다시 만들게 되었습니다. 기존에도 만들어 둔것이 있기는 했는데 계속 사용하면서 불편한 점을 개선하고 아이디어도 더 추가하고 CSS, html 코딩도 개선하여 새로운 시스템을 만들게 되었습니다. 역시 개발엔 끝이 없네요.

원래 제이쿼리 강좌를 꾸준히 진행할 예정이었는데 꾸준하지 못했습니다. 부지런함 꾸준함은 정말 모든것의 기본인것 같습니다. 이렇게 생각 하지만 다시 시간이 흐르면 .. ㅠㅠ ..

아무튼 이 시스템을 활용해서 다시 한번 강좌를 시작해 보려고 합니다. 기존에 올려둔 강좌를 가져와서 좀 더 쉽고 보기 편하게 새로 올리고 멈추었던 강좌도 다시 진행해 보겠습니다. 쉽고 재미있는 좀 엉뚱한 예제위주로 계획을 하고있습니다.

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

그럼 간단한 예제로 턴을 마쳐보겠습니다.

음식 무한 복제 !!
아래 그림을 클릭해 보세요. 그러면 복제가 될것입니다.
복제된 것을 클릭해도 또 복제가 되며.. 그 복제된걸 클릭하면 또.. 그런 식 입니다.
그리고 복제된 이미지들은 3초후 제거됩니다.

간단한 예제이지만 많은 개념(?)이 들어있습니다.
이런 예제들도 다뤄보겠습니다.

현실에서도 이런게 가능하면 먹는 문제는 없을텐데요 ^^;;

.food {
	text-align:center;
}
.food img {
	position:relative;
	cursor:pointer;
	z-index:999;
	vertical-align:top;
}

<div class="food" onselect="return false">
	<img src="http://superkts.com/img/icon/food/fo075.gif" onclick="foodCopy(this)" />
	<img src="http://superkts.com/img/icon/food/food209.gif" onclick="foodCopy(this)" />
	<img src="http://superkts.com/img/icon/food/food_fd32.gif" onclick="foodCopy(this)" />
	<br>위 그림을 클릭해 보세요!
	<br><br><br><br><br><br><br>
	<button type="button" class="" onclick="startClick()">광클릭 모드</button>
	<button type="button" class="" onclick="stopClick()">멈추기</button>
</div>

function foodCopy(o){

	var pos  = $(o).offset(); // 클릭한 이미지의 위치알아내기
	// 이동할 위치값을 랜덤으로 생성 -150 부터 150 사이
	var rnd1  = Math.round( Math.random() * 300 - 150 );
	var rnd2 = Math.round( Math.random() * 300 - 150 );

	// 클릭한 이미지 기준으로 이동할 위치계산
	var move_top = pos.top - rnd1;
	var move_left = pos.left - rnd2;

	// 보기편하게 여러줄 코딩
	$(o)
	.clone() // 클릭한 이미지 복제
	.appendTo( '.food' ) // food 에 복제한것 추가
	.css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경
	.animate( { top : move_top, left : move_left }, 1000, function(){ // 위치이동 애니매이션
		var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기
		setTimeout( function(){ $(img).remove(); }, 3000); // 3초 후 제거
	});
}

var timer;

// 자동 클릭 (광클)
function startClick(){
	$('.food img:gt(-4)').click();
	clearInterval(timer);
	timer = setTimeout(startClick, 50);
}

// 자동 클릭 멈추기
function stopClick(){
	clearInterval(timer);
}

굉장히 간단한 소스로 조금 그럴듯한 효과를 내는 예제입니다.
이런걸 제이쿼리 없이 직접 만들려면 쉽지는 않겠죠? ㅎㅎ

.food {
	text-align:center;
}
.food img {
	cursor:move;
}

<div class="food">
	아래 음식들을 드래그 했다가 놓아보세요.<br><br>
	<img src="http://superkts.com/img/icon/food/fff22.gif" />
	<img src="http://superkts.com/img/icon/food/fff27.gif" />
	<img src="http://superkts.com/img/icon/food/fff28.gif" />
	<img src="http://superkts.com/img/icon/food/fo028.gif" />
	<img src="http://superkts.com/img/icon/food/fo035.gif" /><br><br>
	<img src="http://superkts.com/img/icon/food/food_fd32.gif" />
	<img src="http://superkts.com/img/icon/food/food09[1].gif" />
	<img src="http://superkts.com/img/icon/food/food_fd213.gif" />
</div>

// 보기편하게 여러줄로 코딩
$( '.food img' )
.draggable({ // 제이쿼리UI 의 draggable 을 사용하여 드래그가 되도록 만든다
	stop : function(){ // 드래그 종료시 실행되는 부분
		// 이미지를 원래 위치로 이동(애니매이션)하며 움직임 효과는 easeOutElastic 을 사용한다.
		// easeOutElastic 은 미리 정의된 움직임 효과 이름이며 당겼다가 놓았을때 탄성이 있는듯한데.. 그 효과 입니다.
		// 이런 움직임 효과는 수학적인 부분인데 .. 몰라도 쓸 수 있습니다.
		$(this).animate({ top : 0, left : 0 }, 1000, 'easeOutElastic' ); // 원위치로
	}
});

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