건담 출동 !!, 동적생성 + 애니메이션

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

제이쿼리를 이용하여 HTML 객체를 동적 생성하는 예제입니다.

건담 이미지를 사용하여 이론상 무한대의 건담을 동적으로 생성할 수 있고

각각 다른 움직임을 적용하여 움직이게 해보았습니다.

아래 예제의 출동 버튼을 연타해 보세요 ^^

※ 동적생성과 제이쿼리 에니메이션 관련 예제입니다.

사용한 이미지

예제

소스

<script type="text/javascript">

	function anim(j){
		var px1 = Math.round(Math.random() * 100);
		var px2 = Math.round(Math.random() * 100);
		var time = Math.round(Math.random() * 500) + 500;
		if(j.position().top > 500){
			j.fadeOut(500, function(){ j.remove() });
			return;
		}
		j.animate({left:'+='+px1,top:'+='+px2}, time, function(){ anim(j) });
	}

	function gogogo(){
		$('#base').append('<img src="http://biketago.com/img/etc/gundam1.gif" style="z-index:999; position:absolute;" />');
		anim($('#base img:last'));
	}

</script>

<div id="base" class="" style="top:0; left:0; position:fixed;"></div>

<div style="text-align:center;">
	<input type="button" value="출 동 !" style="width:150px; height:50px;" onclick="gogogo()">
</div>

<script type="text/javascript">

	function anim(j){
		var px1 = Math.round(Math.random() * 100);
		var px2 = Math.round(Math.random() * 100);
		var time = Math.round(Math.random() * 500) + 500;
		if(j.position().top > 500){
			j.fadeOut(500, function(){ j.remove() });
			return;
		}
		j.animate({left:'+='+px1,top:'+='+px2}, time, function(){ anim(j) });
	}

	function gogogo(){
		$('#base').append('<img src="http://biketago.com/img/etc/gundam1.gif" style="z-index:999; position:absolute;" />');
		anim($('#base img:last'));
	}

</script>

<div id="base" class="" style="top:0; left:0; position:fixed;"></div>

<div style="text-align:center;">
	<input type="button" value="출 동 !" style="width:150px; height:50px;" onclick="gogogo()">
</div>

관련글 모음 (제이쿼리 애니메이션 예제 모음)

☞ 달팽이홈2

등록일 : 2014-12-05