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

Hello World 해보기

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

안하면 안될것 같은 헬로월드(Hello World)

강좌를 시작하기전 헬로월드를 한번 해보고 가겠습니다.
제일 만만한게 헬로월드라고 생각할 수 있겠습니다.
과연 그럴까요? 두둥.

- 잉여력이 폭발한(?) 제이쿼리로 만들어본 다양한 Hello World 예제입니다.
- 구경만 하는 예제이므로 소스 설명은 되어있지 않았습니다. ^^;
- 처음으로 헬로월드가 사용되었다고 합니다.
- 자 그럼 Hello World !
- 반복되는 헬로월드에 지치셨나요? ㅠㅠ

버튼 클릭하면 계속 추가되는 Hello World


효과에 비해 소스가 간단합니다.




CSS

.helloworld {
	border-radius:5px;
	border:5px solid silver;
	display:inline-block;
	padding:20px;
}
.helloworld.on {
	background:yellow;
	border-color:red;
	box-shadow:0 0 10px red;
	color:red;
}

HTML

<button type="button" onclick="helloWorld()">버튼을 연타해 보세요 !!</button><br><br>
<div class="helloworld"></div>

자바스크립트

function helloWorld(){
	$('.helloworld:not(:animated)').addClass('on', 200).append('Hello World<br>').removeClass('on', 100);
}

이 예제는 추가로 jQuery UI 를 필요로 합니다. 일단은 넘어갑시다 ^^

헬로월드에 놀란 고양이

Hello World Cat !!
부들부들 또 헬로월드냥~!
Hello World

CSS

.helloworld {
	background-image:url('http://superkts.com/img/jjal/cat01.jpg');
	background-repeat:no-repeat;
	background-position:center;
	height:300px;
	position:relative;
	width:400px;
}
.helloworld .text {
	bottom:0;
	color:yellow;
	font-family:verdana !important;
	font-size:40pt !important;
	font-weight:bold;
	position:absolute;
	text-shadow:0 0 5px #000;
}

HTML

<div class="helloworld">
	<div class="text">Hello World</div>
</div>

자바스크립트

function helloworld(){
	var rnd  = Math.round(Math.random() * 20);
	var rnd2 = Math.round(Math.random() * 40);
	var rnd3 = Math.round(Math.random() * 3) + 100;
	$('.helloworld .text').css({ 'bottom':rnd, left:rnd2 }); // 글자 흔들기
	$('.helloworld').css({ 'background-size':rnd3 + '%' }); // 배경 확대
}

setInterval(helloworld, 10);

소스는 그냥 봐도 간단하죠? ㅎㅎ

헬로월드에 감동받은 너구리

너구리 두마리로 가봅니다. 고양이소스 파생형.
고마워요 헬로월드~ 잔잔한 감동 x 2
Hello
World

CSS

.helloworld {
	background-image:url('http://superkts.com/img/jjal/raccoon01.jpg');
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	height:313px;
	position:relative;
	width:400px;
}
.helloworld .text {
	bottom:0;
	color:white;
	font-family:verdana !important;
	font-size:15pt !important;
	font-weight:bold;
	margin:0 0 100px 65px;
	position:absolute;
	text-align:center;
	text-shadow:0 0 3px #000;
}

HTML

<div class="helloworld">
	<div class="text">Hello</div>
</div>
<div class="helloworld">
	<div class="text">World</div>
</div>

자바스크립트

function helloworld(){
	var rnd  = Math.round(Math.random() * 3);
	var rnd2 = Math.round(Math.random() * 1);
	$('.helloworld .text').css({ 'bottom':rnd}); // 글자 흔들기
	$('.helloworld').css({ 'background-position':rnd2 }); // 배경 흔들기
}

setInterval(helloworld, 10);

형상기억 헬로월드

마우스로 글자를 드래그 했다가 놓아보세요 ^^
Hello World

CSS

.helloworld {
	background:#efefef;
	line-height:normal !important;
	padding:20px !important;
	text-align:center;
}
.helloworld span {
	cursor:pointer;
	font-family:verdana !important;
	font-size:60pt !important;
	font-weight:bold;
}

HTML

<div class="helloworld">
	<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
	<span>W</span><span>o</span><span>r</span><span>l</span><span>d</span>
</div>

자바스크립트

$('.helloworld span')
.draggable({
	stop : function(){
		$(this).animate({top:0, left:0 }, 500, 'easeOutElastic');
	}
});

"세상은 항상 아름답지만은 않지" by Hello World

빨간색 O 를 당겨보세요. Hell 로 변할것 입니다.
한글자 차이로 월드가 되기도 합니다. 현실은 냉정합니다.
Hello World !?

CSS

.helloworld {
	line-height:normal !important;
	padding:20px !important;
	text-align:center;
}
.helloworld, .helloworld span {
	font-family:verdana !important;
	font-size:50pt !important;
	font-weight:bold;
}
.helloworld span { color:red; cursor:pointer; }
.helloworld .box {
	background:#efefef;
	display:inline-block;
	height:400px;
	margin-top:10px;
	overflow:hidden;
	width:500px;
}

HTML

<div class="helloworld">
	Hell<span>o</span> World !?<br>
	<div class="box">
		<img src="http://superkts.com/img/jjal/future.jpg" />
	</div>
</div>

자바스크립트

$('.helloworld span')
.draggable({
	drag : function(e){
		var a = Math.abs(parseInt($(this).css('top')));
		var b = Math.abs(parseInt($(this).css('left')));

		// 드래그한 "O" 의 위치값을 계산하여 이미지를 스크롤하기
		// 어느 방향으로 드래그 하더라도 일정한 수치만큼 스크롤
		// 피타고라스의 정리 응용(?) 수학?!
		$('.box').scrollTop(Math.sqrt(a*a + b*b));
	},
	stop : function(){
		$(this).animate({top:0, left:0 }, 500, 'easeOutElastic'); // 드래그한 "O" 원래 위치로 되돌리기
		$('.box').animate({'scrollTop':0}, 500, 'easeOutBounce'); // 이미지 스크롤 되돌리기
	}
});

나름 다양한 효과를 사용하였습니다. 소스는 의외로 단순하죠?
피타고라스의 정리를 이용해서 어느 방향으로 당기더라도 일정한 수치만큼
이미지가 움직이도록 해보았습니다. 살면서 처음 써본 공식 ... ^^;;

전방에 힘찬 Hello World !!! - 군대 버전

버튼을 눌러서 힘찬 함성을 발사해 보십시오.
버튼을 연타해 보십시오.
실시 (실시)

CSS

.helloworld {
	height:300px;
	text-align:right;
}
.helloworld img {
	margin-top:75px;
	width:150px;
}
.helloworld .box {
	height:300px;
	margin-left:-90px;
	overflow:hidden;
	position:absolute;
	width:100%;
}

.helloworld span {
	font-family:verdana !important;
	font-size:30pt !important;
	font-weight:bold;
	padding-top:150px;
	position:absolute;
	right:-250px;
	text-align:left;
	white-space:nowrap;
}

HTML

<div class="helloworld">
	<div class="box"></div>
	<img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<button type="button" onclick="helloworld()">전방에 힘찬 Hello World 발사 !!</button>

자바스크립트

var helloworld_timer;
var helloworld_counter = 0;

function helloworld(){
	clearTimeout(helloworld_timer);

	$('.helloworld img').attr('src', 'http://biketago.com/img/etc/huk2.gif');

	helloworld_timer = setTimeout(function(){
		$('.helloworld img').attr('src', 'http://biketago.com/img/etc/huk1.gif');
		helloworld_counter = 0;
	}, 1000);

	helloworld_counter++;

	var rnd = 150 - Math.round(Math.random() * 300);
	var tmp = '+=' + rnd;
	if(rnd < 0) tmp = '-=' + Math.abs(rnd);

	var move_right = ($('.helloworld').width() + 300).toString();

	var el = $('<span>Hello World</span>')
	.appendTo('.helloworld .box')
	.animate({'right':'+=' + move_right, top:tmp}, 1500, 'easeInCubic', function(){
		$(this).remove();
	});

	if(helloworld_counter > 20) el.html('<img style="width:80px;" src="http://biketago.com/img/etc/huk2.gif">').css('padding-top', '50px'); // 패닉 모드
	else if(helloworld_counter > 10) el.html('그만 해 !!!');
}

CSS를 많이 활용한 예제입니다. CSS도 중요합니다. ㄷㄷ

목소리가 작습니다 !! 목소리가 그것밖에 안나옵니까?? - by 헬로월드
저녁 말고 전역이다 !!! - by 말년

무한 증식 헬로월드

클릭하면 무한 증식(복제)되는 헬로월드 입니다.

복제된 헬로월드도 클릭하면 다시 복제 되고
그 복제된것도 클릭하면 또 복제 됩니다. 이쯤 되면 재앙수준입니다.
하지만 5초후 자동으로 소멸합니다. (본체는 소멸하지 않습니다)

아래 헬로월드를 클릭해 봅시다.

Hello World

CSS

.helloworld_box {
	text-align:center;
}
.helloworld_box .helloworld {
	color:#8000FF;
	cursor:pointer;
	font-size:50pt !important;
	font-weight:bold;
	position:relative;
	text-shadow:0 0 5px #FF0080;
	z-index:100;
}

HTML

<div class="helloworld_box">
	<span class="helloworld" onclick="cloneHelloWorld(this)">Hello World</span>
</div>

자바스크립트

function cloneHelloWorld(o){

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

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

	// 보기편하게 여러줄 코딩
	$(o)
	.clone() // 클릭한 이미지 복제
	.appendTo( '.helloworld_box' ) // 복제한것 추가
	.css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경

	// 위치이동 애니매이션
	.animate( { top : move_top, left : move_left }, 1000, 'easeOutElastic', function(){
		var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기

		// 5초후 제거
		setTimeout(function(){
			$(img).remove();
		}, 5000);
	});
}
원래 꾸준히 강좌를 진행할 예정이었으나.
먹고 사는 문제로 인하여... 결국 잘 진행되지 못하고 있습니다.
죄송합니다. ㅠㅠ

현재 강좌는 비공개로 작성 하고 완료되면 공개하는 방식으로 올리고 있었습니다.
하지만 그렇게 하니 오늘 할 일을 내일로 자꾸 미루는 결과가 발생했습니다.

그래서 일단 완성되지 않은 강좌라도 공개하고 틈날때 내용을 추가하는 방식으로 바꿔 보려고 합니다.
이 글도 그런 상태입니다. 그래야 책임감 있게 올릴것 같습니다. ^^;;

음.. 일단 기대해 주세요 !!!
조금이라도 도움이 되는 곳으로 만들어 나가겠습니다.

※ 이 내용은 강좌가 완료되면 삭제하겠습니다.