웹마스터 팁
레이어 4 - 뽀나수 하나
2004.07.07 01:51
레이어에 관한 소스, 이번엔 보너습니다.
레이어에 이미지 한장을 넣어줍니다.
그리고 그 이미지를 움직여보는 소스죠.
하나는 등속 운동, 하나는 가속운동, 하나는 공처럼 튀겨지는 운동입니다.
등속 운동은 시간당 일정한 상수만큼 레이어 위치를 변화 시켜주면 됩니다.
가속 운동은 시간당 일정한 비율로 변하는 변수만큼 변화 시켜주죠.
공 튀기는 운동은 좀 잔머리가 필요합니다.
처음 위치에서 얼마만큼 튀어오를 것인가를 결정하는 비율을 기억해줄
필요가 있습니다.
이 위치까지 공이 튀어오르면 이 위치가 새로운 기준이 되어서
다음 튀어오를땐 이 위치에 정해준 비율이 또 다른 새위치가 되는거죠.
참조 : http://allzza.net/xxx/aboard.php?id=pds&dbf=13&mode=source
<html>
<title>
레이어 이동
</title>
<head>
<script>
/*****************************************************
제작 : 미친개(webmaster@allzza.net)
날짜 : 04.06.26
사용과 수정, 편집 재배포에서 자유롭습니다.
학습용으로 사용하시길 권합니다.
*****************************************************/
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>
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |
| 레이어 4 - 뽀나수 하나 [1] | 미친개 | 2004.07.07 |
| 레이어 5 - 뽀나수 둘 [6] | 미친개 | 2004.07.07 |
| 웹 문서 암호화 스크립트 [1] | 미친개 | 2004.07.20 |
| 아이프레임으로 문서크기 자동조절하기(완벽판) [13] | 렌디 | 2004.07.21 |
| 문서에 따른 아이프레임 heigh(높이) 값 자동 조절 (수정본) [3] | 스토비━ⓒ | 2004.07.31 |
| 원하는 아이프레임부분을 리로드하자! [1] | †천상의燦† | 2004.08.02 |
| Javascipt로 구현한 MD5,MD4,SHA1 [10] | 장종석 | 2004.08.06 |
| 레이어를 클릭해서 보이거나 사라지게 하기 [3] | †천상의燦† | 2004.08.18 |
| 이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류 [11] | beMax | 2004.08.18 |
| 싸이처럼 테이블 안에서 버튼으로 이동/스크롤 하기 [5] | 제로스 | 2004.09.09 |
| 랜디님의 iframe 크기조절 소스응용-iframe 최저길이 지정하기 [1] | 김수형 | 2004.09.10 |
| 셀렉트 메뉴를 통해 갤러리 만들기 | 한현종 | 2004.09.10 |
| 요일마다 바뀌는 상태바 인사 말~ [2] | Kasis | 2004.09.13 |
| 내홈피 즐겨찾기/새로고침/앞/뒤로가기 [4] | 팡이 | 2004.09.13 |
| 메뉴 추가 삭제 수정시 쓰면 좋을것 같네요 - 출처: http://www.happyscript.com/ [1] | 예뜨락 | 2004.09.17 |
| 슬라이딩 메뉴 자바스크립트 [3] | 행복한고니 | 2004.09.21 |
| 멀티 파일다운로드 꽁수로 구현하기 [1] | 행복한고니 | 2004.10.07 |
| 웹페이지에서 단축키 사용 (Firefox) [2] | 전종화 | 2004.10.07 |
| 자바스크립트로 구현한 윈도우 스타일.. [2] | 크래닉스 | 2004.10.07 |
튕겨서 튀어 올랐다가 떨어지는게 끊기는듯 싶어요~ 좀더 부르럽게~~