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

비둘기를 많이 모아서 날려보자

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

비둘기 입니다

이번 예제의 주인공이죠.

이번엔 제이쿼리로 비둘기를 모아서 한꺼번에 날려보는 예제입니다.
애니메이션 효과, jquery UI easing(이징)효과를 주로 사용합니다.

혹시 엄청난걸 기대하신것은 아니시겠죠?

※ 아직 작성중인 글입니다.

아래 비둘기 모으기 버튼을 연타하고 비둘기 날리기 버튼을 눌러보세요

팁 : 모으기 버튼 한번 누른후 엔터키를 누르고 있으면 편합니다.
너무 많이 모으면 안됩니다. ^^;

CSS

.dove_land {
	background-position:bottom;
	background-repeat:no-repeat;
	border-bottom:7px solid #B16363;
	height:500px;
	margin:0 auto;
	position:relative;
	width:700px;
}
.dove_land img {
	position:absolute;
	bottom:100%;
}

HTML

<div class="dove_land"></div>
<div style="text-align:center; margin-top:20px;">
	<button type="button" onclick="doveOn()">비둘기 모으기</button>
	<button type="button" onclick="doveOut()">비둘기 날리기</button>
</div>

자바스크립트

function doveOn(){
	$('<img src="http://biketago.com/img/dove.png" />')
	.appendTo('.dove_land')
	.css({ left:Math.round(Math.random() * 680) - 80 })
	.animate({bottom:-5}, 1000, 'easeOutBounce');
}

function doveOut(){
	$('.dove_land img').each(function(){
		var o = this;
		setTimeout(function(){
			var rnd1 = Math.round(Math.random() * 3000) - 1500; // -1500 에서 1500 사이 랜덤값
			var img = 'http://biketago.com/img/dove2.png';
			if(rnd1 < 0) img = 'http://biketago.com/img/dove3.png';

			$(o).attr('src', img).animate({ bottom:'200%', left:'+=' + rnd1 }, 1000, 'easeInExpo', function(){
				$(this).remove();
			});
		}, Math.random() * 1000);
	});
}

실행 가능한 소스