움직이는 막대 그래프 만들기 자바스크립트 소스입니다. 개별 막대가 점진적으로 목표 크기에 다가가는 모션이 적용되었으며 막대의 현재 크기와 목표 크기 사이의 간격을 기준으로 일정 비율(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] = d0cument.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] = d0cument.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>
'JavaScript' 카테고리의 다른 글
| 자바스크립트로 구성된 이미지 슬라이더입니다. (0) | 2009.01.02 |
|---|---|
| 자바스크립트 복수 게시물 더보기/접기(more/less) 소스 (0) | 2009.01.02 |
| 자바스크립트 #1 객체지향 흉내내기 (0) | 2009.01.02 |
| 한글 체크 자바스크립트 (0) | 2009.01.02 |
| 새로고침 키 막기 (0) | 2008.12.09 |
