jQuery로 엘리베이터 만들기

경영학을 공부하고 마케팅을 하다 심리학에 심취해 시간을 보내다가 어느덧 코딩을 하게된지 2개월 정도 되었을 때 만든 것입니다.

공부한 거라곤 Javascript 기초, jQuery 기초 뿐이라서 지금 보면 눈에 땀이나는 수준의 결과물을 내놓았지만 당시에는 엄청 만족했던 결과물입니다. 이전까지 제가 만들었던 것들은 단순한 가위바위보 프로그램 정도였으니 움직이고 변하는 jQuery로 만든 엘리베이터는 저에겐 신세계일 수 밖에 없었죠. 코드는 간단합니다.

html은 간단합니다. 그저 층수대로로 처리해주고, img태그로 졸X맨스러운 이미지를 링크했을 뿐입니다. 이미지는 구글링을 통해 찾았습니다.

HTML markup

  
  
  
  
 
    
7th floor
 
    
6th floor
    
5th floor
    
4th floor
    
3rd floor
    
2nd floor
    
1st floor
  
  
elevator
  

CSS stylesheet

body{
  background:#222;
  color:#fff;
  padding:30px 20px 20px 30px;
  line-height:1.4;
  font-family: '나눔 고딕';
}
.tower{
  display: inline-block;
  background-color: grey;
  left: 320px;
  position: relative;
}
.floor {
  width: 300px;
  height: 100px;
  background-color: pink;
  margin:10px 10px 10px 10px;
  font-size:2em;
  font-weight:bold;
  cursor: pointer;
  position: relative;
  text-align: right;
  padding-right: 10px;
}
.elevator {
  width: 300px;
  height: 100px; 
  margin: -10px 10px 10px 10px;
  background-color: skyblue;
  position: absolute;
  padding-left: 10px;
  font-size:2em;
  font-weight:bold;
  cursor: default;
}
.brown {
  background-color: brown;
}
.clickbrown {
  background-color: brown;
}
.yellowgreen {
  background-color: yellowgreen;
}
.people {
  position: absolute;
  margin: -10px 10px 10px 10px;
  width: 70px;
  height: 100px;
}

jQuery script

$(document).ready(function(){
var elevator = $('.elevator');
var floors = $('.floor');
var f1 = $('#f1');
var people = $('.people');
var runner = $('#runner');
people.css({
    top: f1.position().top+58,
  	left: f1.position().left+380
	});
elevator.css({
    top: f1.position().top+58,
	});
elevator.hover(function() {
	$(this).addClass('yellowgreen');
}, function() {
	$(this).removeClass('yellowgreen');
});
elevator.click(function(event) {
	$('div:animated').stop()
	$('div:animated').fadeOut('fast');
	$('div:animated').fadeIn('fast');
	$('div:animated').animate({param1: value1, param2: value2}, speed)
});
floors.bind({
	mouseenter : function() {$(this).addClass('brown')},
	mouseleave : function() {$(this).removeClass('brown')},
	click: function(){
		floors.removeClass('clickbrown')
		$(this).addClass('clickbrown')
	}
});
floors.each(function() {
	var pos = $(this).position();
	$(this).click(function(){    
		if ( $(this).attr('id') === 'runner' ) {
	  		return;
 		};
		elevator.delay(500).animate({top: pos.top+58}, 1000);
		runner.animate({left: '-=150px'}, 500);
		runner.animate({
				top: pos.top+58,
  			left: pos.left+230
				}, 1000);
		runner.animate({left: '+=150px'}, 500);
	});
});
});

저기 나온 졸라맨스러운 이미지만 따로 구한 것일뿐 나머지는 그저 코드로 구현한 것들입니다.

움직이는 도중에 다른 층을 선택하면 엘리베이터는 먼저 그 층을 향해 떠나고 사람은 공중부양을 하면서 날아가는 버그가 있긴하지만 별거 아니니(!) 넘어가도 되겠죠?

처음에는 움직이는 만큼 높이에 (+), (-)를 해주면 되겠다 싶어 그런 방식으로 구동시켰었지만 한마디로 실패 실패 실패!

그래서 층 위치와 엘리베이터 위치를 맞춰주는 방식으로 구동하니 마음 편하게 되더군요. 어쨋든 추억에 잠기는 저의 결과물이네요.

링크로 들어가시면 확인할 수 있습니다.

jQuery로 끄적거려서 만든 첫 결과물