웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
DHTML의 시작 - Typing 스크립트 (예제)
2002.04.19 13:10
정작 DHTML에 대한 강좌가 폼쪽으로 하다보니 다른 강좌로 바뀌는 것 같아서
다시 원래 의도한 대로 DHTML도 섞어서 해보기로 했습니다.
NeoM MVP II 버전에 쓰일 모듈로써 하나씩 시험삼아 만들어 본 스크립트지요.
지금은 테스트를 위해 홈페이지에 게시판에 Notice시 삽입해서 사용하고 있지요..
미리보기에서 확인해보실 수 있습니다.
스크립트 길이도 얼마되지 않으니 적당한 쓸때가 있을 듯 하네요..
주석 보시고 소스 분석 연습도 해보시는 것도 좋지요.
<SCRIPT LANGUAGE="JavaScript">
<!--
var help_text=new Array(); // 타이핑할 문자열을 배열로 지정하지요. 아래처럼 순서대로 넣습니다.
help_text[0]="대충 타이핑 스크립트 만들어 봤습니다."
help_text[1]="이름은 Neo Crazy Typing이라구 "
help_text[2]="지었지요.. 어디 쓸만한데 있으심"
help_text[3]="써 보시지요..."
var i=0, j, k=0; // 변수지정, 타이핑 카운트를 조절하기 위한 변수들이지요.
var helpID; // 타임아웃 시킬 아이디를 지정합니다. (마우스 오버시 타이핑을 멈추게 하려고 사용하지요
var tail="▒"; // 글자 뒤의 커서 역할을 하는 모양이지요
function help(){
el=document.all.typing; // 표시할 엘리먼트를 지정합니다. (typing이 id지요)
if(help_text[k].length+r>=i) // 문자열의 길이에 적당한 숫자를 더해서 i값과 비교
{
if(i<r){ // 초기 몇번 커서의 깜박임을 주는 효과지요
if(el.innerText==tail) // 아래 부분이 깜박이는 부분..
el.innerText=" ";
else
el.innerText=tail;
helpID=setTimeout("help()",time2); // 함수를 다시 호출합니다.
j=help_text[k].length+r; // 현재 했던것을 다시 반복하기위해 필요하지요
}
else{
el.innerText=help_text[k].substring(0,i-r)+tail; // 깜박임을 끝내고 실지 글을 씁니다.
helpID=setTimeout("help()",time1); // 역시 자신을 다시 호출하지요.
}
i++;
}
else // 아래부분은 윗 함수의 역실행으로 보시면 됩니다.
{
if(help_text[k].length<j){
if(el.innerText==help_text[k])
el.innerText=help_text[k]+tail;
else
el.innerText=help_text[k];
helpID=setTimeout("help()",time2);
}
else{
el.innerText=help_text[k].substring(0,j)+tail;
helpID=setTimeout("help()",time1);
}
if(j==0){ // 한 사이클이 실행되면
i=0;r=rnd(30);time1=rnd(50); time2=rnd(200); // 타이핑 속도나 지연시간을 랜덤하게 다시 설정하지요
if(help_text.length-1>k) // 다음 문자열을 불러옵니다.
k++;
else
k=0;
}
j--;
}
}
function rnd(n) { return Math.floor(Math.random()*n)+1; } // 랜덤 수를 뽑아오는 게지요
var time1=rnd(50), time2=rnd(200), r=rnd(30); // 초기값을 가져옵니다.
//-->
</SCRIPT>
<body onload="help()">
<span id=typing onMouseout="help()" onMouseOver="clearTimeout(helpID)"></span>
음.. 미리보기는 http://neom.new21.net/zboard/zboard.php?id=qna 요기서 보시면 되구요..
가끔가다 시간 나면 소스 하나씩 스터디 중간중간 만들어 올리도록 하지요
다시 원래 의도한 대로 DHTML도 섞어서 해보기로 했습니다.
NeoM MVP II 버전에 쓰일 모듈로써 하나씩 시험삼아 만들어 본 스크립트지요.
지금은 테스트를 위해 홈페이지에 게시판에 Notice시 삽입해서 사용하고 있지요..
미리보기에서 확인해보실 수 있습니다.
스크립트 길이도 얼마되지 않으니 적당한 쓸때가 있을 듯 하네요..
주석 보시고 소스 분석 연습도 해보시는 것도 좋지요.
<SCRIPT LANGUAGE="JavaScript">
<!--
var help_text=new Array(); // 타이핑할 문자열을 배열로 지정하지요. 아래처럼 순서대로 넣습니다.
help_text[0]="대충 타이핑 스크립트 만들어 봤습니다."
help_text[1]="이름은 Neo Crazy Typing이라구 "
help_text[2]="지었지요.. 어디 쓸만한데 있으심"
help_text[3]="써 보시지요..."
var i=0, j, k=0; // 변수지정, 타이핑 카운트를 조절하기 위한 변수들이지요.
var helpID; // 타임아웃 시킬 아이디를 지정합니다. (마우스 오버시 타이핑을 멈추게 하려고 사용하지요
var tail="▒"; // 글자 뒤의 커서 역할을 하는 모양이지요
function help(){
el=document.all.typing; // 표시할 엘리먼트를 지정합니다. (typing이 id지요)
if(help_text[k].length+r>=i) // 문자열의 길이에 적당한 숫자를 더해서 i값과 비교
{
if(i<r){ // 초기 몇번 커서의 깜박임을 주는 효과지요
if(el.innerText==tail) // 아래 부분이 깜박이는 부분..
el.innerText=" ";
else
el.innerText=tail;
helpID=setTimeout("help()",time2); // 함수를 다시 호출합니다.
j=help_text[k].length+r; // 현재 했던것을 다시 반복하기위해 필요하지요
}
else{
el.innerText=help_text[k].substring(0,i-r)+tail; // 깜박임을 끝내고 실지 글을 씁니다.
helpID=setTimeout("help()",time1); // 역시 자신을 다시 호출하지요.
}
i++;
}
else // 아래부분은 윗 함수의 역실행으로 보시면 됩니다.
{
if(help_text[k].length<j){
if(el.innerText==help_text[k])
el.innerText=help_text[k]+tail;
else
el.innerText=help_text[k];
helpID=setTimeout("help()",time2);
}
else{
el.innerText=help_text[k].substring(0,j)+tail;
helpID=setTimeout("help()",time1);
}
if(j==0){ // 한 사이클이 실행되면
i=0;r=rnd(30);time1=rnd(50); time2=rnd(200); // 타이핑 속도나 지연시간을 랜덤하게 다시 설정하지요
if(help_text.length-1>k) // 다음 문자열을 불러옵니다.
k++;
else
k=0;
}
j--;
}
}
function rnd(n) { return Math.floor(Math.random()*n)+1; } // 랜덤 수를 뽑아오는 게지요
var time1=rnd(50), time2=rnd(200), r=rnd(30); // 초기값을 가져옵니다.
//-->
</SCRIPT>
<body onload="help()">
<span id=typing onMouseout="help()" onMouseOver="clearTimeout(helpID)"></span>
음.. 미리보기는 http://neom.new21.net/zboard/zboard.php?id=qna 요기서 보시면 되구요..
가끔가다 시간 나면 소스 하나씩 스터디 중간중간 만들어 올리도록 하지요
댓글 2
제목 | 글쓴이 | 날짜 |
---|---|---|
XE를 홈페이지 루트에 설치하여 BGM 설치가 불가능할 때... [6] | Firstlove | 2011.05.29 |
로그인풀림방지 - 주소 고정하기 [27] | ezi | 2011.05.28 |
웹폰트의 개념과 사용법 [2] | hika1 | 2011.05.26 |
유닉스에서 디스크 용량 체크 후 호출 해주는 프로그램 | 길버트전 | 2011.05.24 |
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기. [5] | DynamicLaser | 2011.05.22 |
드림위버로 FTP 파일 바로 수정하기 : FTP다운로드->수정->FTP업로드 번거러운 수정과정 X [3] | Treasurej | 2011.05.21 |
XE 첨부파일 문제로 게시판이 백지화 될때... [1] | 똑디 | 2011.05.20 |
[PHP 기초] 연산자1 | 난다날아 | 2011.05.19 |
모바일레이아웃에서의 통합검색 [11] | 카르마 | 2011.05.19 |
XE 프로젝트 호스팅 SVN 내용을 Google 프로젝트 호스팅으로 이전하기 | 난다날아 | 2011.05.17 |
'왕' '왕초보'를 위한 ZB4-->XE버전으로 이전시 가장 간단한 순서 [1] | 쭈영 | 2011.05.17 |
XE core 1.4.5.7 코드 오류,(상자 위젯 배경 안될때) [2] | 홍성빈닌 | 2011.05.17 |
따른사이트와 내채팅방 연동하기~!<미니온4편> [7] | 토끼매니아 | 2011.05.15 |
XE 공식 버튼2 삽입하기 [32] | 웹엔진 | 2011.05.14 |
th 엘리먼트에 scope 속성 사용 [1] | 엘카 | 2011.05.14 |
도와 주세요!!! Explorer 6에서는 제대로 보이는데 Explorer 7 이상에서는 사진이 안보여요 [2] | 이영규616 | 2011.05.12 |
서버이전후 캐시파일 재생성 안되시는분들 [2] | 우냠냠 | 2011.05.11 |
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] | 쏘프티 | 2011.05.10 |
회원 관리자 두기.. | DaKi | 2011.05.09 |
CafeXE에서 마이카페 목록을 셀렉트 박스로 바꾸기 | 늘푸른이 | 2011.05.07 |