움직이는 막대그래프 자바스크립트 소스

자바스크립트 2008/01/06 10:52
TAG , , , , , , , , ,
움직이는 막대 그래프 만들기 자바스크립트 소스입니다. 개별 막대가 점진적으로 목표 크기에 다가가는 모션이 적용되었으며 막대의 현재 크기와 목표 크기 사이의 간격을 기준으로 일정 비율(1/8)로 더해주는 방식입니다. bar_init 함수 내 80 이라는 숫자와 bar_timer 함수 내 8 이라는 숫자를 수정하여 개인 취향에 맞게 모션에 변화를 줄 수 있습니다. 해당 막대의 목표 크기는 img 태그의 barwidth 와 barheight 에 의해서 결정됩니다. 웹페이지에서 오브젝트의 동적인 움직임을 구현할 때 setInterval 이라는 함수가 요긴하게 사용됩니다. 비슷한 방식으로 플래시로 막대 그래프를 구현한다면 setInterval 함수나 onEnterFrame 이라는 이벤트를 사용할 수 있습니다. 그런데 Tween 객체를 쓰면 보다 손쉽게 모션을 구현할 수 있지요. 막대그래프를 그리는 방법에 대한 정답은 당신에게 있습니다. 자신의 개성에 맞게 수정하고 보완한다면 그 정답을 찾을 수 있을겁니다.  




<HTML>
<HEAD>
<TITLE>막대그래프</TITLE>
<script>
var bar_obj = [], ybar_obj = [], bar_obj_max = 14, ybar_obj_max = 21;
function bar_timer(pos){
	var obj = bar_obj[pos], more;
	if ((obj.barwidth - obj.width)>1){
		more = (obj.barwidth - obj.width) / 8;
		obj.width += more;
	} else {
		clearInterval(obj.timer_id);
		obj.width = obj.barwidth;
	}
}
function ybar_timer(pos){
	var obj = ybar_obj[pos], more;
	if ((obj.barheight - obj.height)>1){
		more = (obj.barheight - obj.height) / 8;
		obj.height += more;
	} else {
		clearInterval(obj.timer_id);
		obj.height = obj.height;
	}
}
function bar_init(){
	for (i=0;i<bar_obj_max;i++){
		bar_obj[i] = document.getElementById('bar_img_'+i);
		bar_obj[i].timer_id = setInterval('bar_timer('+i+')',30);
	}
	for (i=0;i<ybar_obj_max;i++){
		ybar_obj[i] = document.getElementById('ybar_img_'+i);
		ybar_obj[i].timer_id = setInterval('ybar_timer('+i+')',30);
	}
}
</script>
<style>
.box_id {width:360px}
.box_id td {background-color:#111111;}
.ybox_id {height:200px;}
.ybox_id td {background-color:#111111; text-align:center; vertical-align:bottom}
</style>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="javscript:bar_init();">
<table cellspacing=2 cellpadding=2 border=0 width=500 class=box_id>
<tr><td><img id='bar_img_0' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="1" height="12" barwidth=280></td></tr>
<tr><td><img id='bar_img_1' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="1" height="12" barwidth=250></td></tr>
<tr><td><img id='bar_img_2' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="1" height="12" barwidth=310></td></tr>
<tr><td><img id='bar_img_3' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="1" height="12" barwidth=180></td></tr>
<tr><td><img id='bar_img_4' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="1" height="12" barwidth=320></td></tr>
<tr><td><img id='bar_img_5' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="1" height="12" barwidth=290></td></tr>
<tr><td><img id='bar_img_6' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="1" height="12" barwidth=380></td></tr>
<tr><td><img id='bar_img_7' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="1" height="12" barwidth=280></td></tr>
<tr><td><img id='bar_img_8' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="1" height="12" barwidth=250></td></tr>
<tr><td><img id='bar_img_9' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="1" height="12" barwidth=300></td></tr>
<tr><td><img id='bar_img_10' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="1" height="12" barwidth=180></td></tr>
<tr><td><img id='bar_img_11' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="1" height="12" barwidth=270></td></tr>
<tr><td><img id='bar_img_12' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="1" height="12" barwidth=290></td></tr>
<tr><td><img id='bar_img_13' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="1" height="12" barwidth=280></td></tr>
</table>
<table cellspacing=2 cellpadding=2 border=0 class=ybox_id>
<tr>
<td><img id='ybar_img_0' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=60></td>
<td><img id='ybar_img_1' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_2' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_3' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_4' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=120></td>
<td><img id='ybar_img_5' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_6' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
<td><img id='ybar_img_7' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=140></td>
<td><img id='ybar_img_8' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_9' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_10' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_11' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=100></td>
<td><img id='ybar_img_12' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_13' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
<td><img id='ybar_img_14' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=140></td>
<td><img id='ybar_img_15' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_16' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_17' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_18' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=50></td>
<td><img id='ybar_img_19' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_20' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
</tr>
</table>
</BODY>
</HTML>
사용자 삽입 이미지

웹프로그래머의 홈페이지정보 블로그 http://hompy.info
이올린에 북마크하기(0) 이올린에 추천하기(0)
받은 트랙백이 없고, 댓글이 없습니다.

트랙백 주소 :: http://www.hompydesign.com/tt/trackback/361

댓글을 달아 주세요

◀ 이전페이지 1 ... 195 196 197 198 199 200 201 202 203 ... 552 다음페이지 ▶