태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

레이어 4 - 뽀나쑤 하나

19년 전

레이어에 관한 소스, 이번엔 보너습니다.

레이어에 이미지 한장을 넣어줍니다.
그리고 그 이미지를 움직여보는 소스죠.
하나는 등속 운동, 하나는 가속운동, 하나는 공처럼 튀겨지는 운동입니다.

등속 운동은 시간당 일정한 상수만큼 레이어 위치를 변화 시켜주면 됩니다.
가속 운동은 시간당 일정한 비율로 변하는 변수만큼 변화 시켜주죠.
공 튀기는 운동은 좀 잔머리가 필요합니다.
처음 위치에서 얼마만큼 튀어오를 것인가를 결정하는 비율을 기억해줄
필요가 있습니다.
이 위치까지 공이 튀어오르면 이 위치가 새로운 기준이 되어서
다음 튀어오를땐 이 위치에 정해준 비율이 또 다른 새위치가 되는거죠.

<html>
<title>
레이어 이동
</title>
<head>
<script>

var vi = 1/2;                    //-- 튀어오르는 비율
var va = 500;                    //-- 최하점 y 좌표
temp = 100;                      //-- 튀어오를때의 y 좌표 상한점
ha = 1;                          //-- 가속도를 산출케 하는 변수. 하향땐 점점 커지고 상향땐 점점 작아짐
direc = 'down';                  //-- 방향을 잡아주는 변수
moving = false;                  //-- temp 변수를 설정하기 위한 변수
img_flag = false                 //-- 공의 회전 효과를 주기 위해 만든 변수인데 회전운동이 허접스러워 그만둠.
timmer = false;                  //-- setInterval() 함수를 쓰기 위한 타이머 변수

function move(flag)   {     //-- 호출 인자에 따라 실행 되는 함수가 틀림.
     _reset();
     if(flag == 0) timmer = setInterval('mov_down1()',50);
     else if(flag == 1) timmer = setInterval('down()',50);
     else if(flag == 2) timmer = setInterval('mov_down()',50);
   }

function down()   {      //-- 위아래 등속 움직이기
     y_top = parseInt(document.all.aaa.style.top);
     if(direc == 'down') {
            document.all.aaa.style.top = y_top + 20;
            if(y_top > va) direc = 'up';
            }
     else  {
            document.all.aaa.style.top = y_top - 20;
            if(y_top < 100) direc = 'down';
            }
    }

function mov_down()   {        //-- 위아래 가속 움직이기
   y_top = parseInt(document.all.aaa.style.top);
   if(direc == 'down')  {
      if(y_top < va)  {
             if(y_top + 3 * ha > va) document.all.aaa.style.top = va;
             else    document.all.aaa.style.top = y_top + 3 * ha;
             ha++;
             }
      else   direc = 'up';
      }
   else      {
      if(y_top > 100)  {
            document.all.aaa.style.top = y_top - 3 * ha;
            ha--;
            }
      else  { direc = 'down';ha = 1;}
      }
   }


function mov_down1()   {    //-- 위아래 가속 움직이기(공 튀기기)
   if(!moving)    temp = va - Math.floor((va - temp) * vi);
   y_top = parseInt(document.all.aaa.style.top);
   if(direc == 'down')  {
      if(y_top < va)  {
             if(y_top + 3 * ha > va) document.all.aaa.style.top = va;
             else    document.all.aaa.style.top = y_top + 3 * ha;
             moving = true;ha++;
             }
      else   direc = 'up';
      }
   else      {
      if(y_top > temp)  {
            document.all.aaa.style.top = y_top - 3 * ha;
            ha--;
            }
      else  { direc = 'down';moving = false;ha = 1;}
      }
   }

function _reset()   {       //-- 모든 변수를 초기화 하고 레이어 위치를 처음으로 돌려주며 타이머를 스톱 시켜주는 함수
   temp = 100;
   ha = 1;
   direc = 'down';
   moving = false;
   img_flag = false;
   document.all.aaa.style.top = 100;
   document.all.aaa.style.left = 100;
   clearTimeout(timmer);
   }
</script>

<body>
<button onclick='move(2)'>가속 움직이기</button>
<button onclick='move(1)'>등속 움직이기</button>
<button onclick='move(0)'>공 튀기기</button>
<div id=aaa style='position:absolute;left:100;top:100;visibility:visable;'>
<img src=http://allzza.net/ball.gif>
</div>

추천 목록

번호	제목
232	새창(공지) 띄우기
231	클릭하면 레이어로 새창 띄우기
230	자동 줄바꿈을 통한 테이블 크기 고정
229	iframe 대신 쓸수있는 오브젝트 1
228	팝업 창을 항상 위로 유지하는 방법
227	전체 화면 띄우기(선택)
226	초보분을위한 메타태그 설명서입니다.
225	레이어 5 - 뽀나쑤 둘
	레이어 4 - 뽀나쑤 하나
223	레이어 3 - 메뉴판때기.
222	레이어 3 - 레이어 안에 1000 개의 글자중에 틀린 글자를 찾아내는 소스입니다
221	이용하기 좋은 DisplayMenu 스크립트
220	새창이 뜰때 항상 위에 오게끔하는 스크립트
219	요일마다 다른게 보이는 문구
218	텍스트상자에 불러오는 값만 받을수 있게 하기
217	텍스트상자에 지정한 글자수가 채워지면 자동이동하기
216	세로형 배너 슬라이드
215	입력창 한글, 영어 자동 선택하게 만들기
214	풀스크린
213	이벤트 객체
212	수식입력후 한꺼번에 계산하는 계산기
211	각종 진법 변환
210	Host name 을 알려주는 스크립트
209	플러스인의 설치여부를 Alert 창으로 알려줍니다
208	사용자 브라우저의 자바 버전 알려주기
207	웹브라우저가 사용하는 언어를 알려줌
206	해상도를 alert박스로 알려줍니다
205	웹브아우저의 정보,해상도,등등..
204	웹브라우저 정보 2
203	웹브라우저 정보 1