웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
▩마우스 주위에 3D 처럼 뱅뱅도는 글자
2002.03.11 10:57
===============================================================
예제보기: http://my.netian.com/~qbqb0808/study27.htm
===============================================================
<Head>와 </Head>사이에 입력
==============================================================
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
yourLogo = "Yoonmi.waa.to"; // 마우스 주위에 나타날 글자 를 써주세요.
logoFont = "돋움체"; // 글자체
logoColor = "#FDB7CE"; // 글자색
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 50; // 장평 글자 간격입니다. 원의 크기 이겠죠!!
logoHeight = -50; // 글자의 크기 입니다. (여기서 - 는 반시계 반향 이고 지우면 시계방향으로 가요~)
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
//-->
</script>
===========================================================
주석 붙였습니다.
고대로 하시면 되구요.
제가 설명한거 외에 고치지 않았으면 좋겠네요^^
예제보기: http://my.netian.com/~qbqb0808/study27.htm
===============================================================
<Head>와 </Head>사이에 입력
==============================================================
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
yourLogo = "Yoonmi.waa.to"; // 마우스 주위에 나타날 글자 를 써주세요.
logoFont = "돋움체"; // 글자체
logoColor = "#FDB7CE"; // 글자색
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 50; // 장평 글자 간격입니다. 원의 크기 이겠죠!!
logoHeight = -50; // 글자의 크기 입니다. (여기서 - 는 반시계 반향 이고 지우면 시계방향으로 가요~)
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
//-->
</script>
===========================================================
주석 붙였습니다.
고대로 하시면 되구요.
제가 설명한거 외에 고치지 않았으면 좋겠네요^^
댓글 6
-
임정대
2002.03.12 20:46
-
多不有時
2002.03.13 12:13
^^
윤미님... -
▩윤미
2002.03.13 20:13
엄정대 // 음.. 제가 전부다 만들었다면 왕그짓말이고, 얍삽하게 필요한 부분 고르고, 대체하고 고치고그랬죠 ^^; -
바라래
2002.04.19 03:01
답답... -
홍상제
2002.11.26 23:37
-
홍상제
2002.11.26 23:42
그 부분을 올립니다.
아래의 부분이 멈춰어 섰어요.
<tr>
<td width="248" height="103">
<div id="layer2" style="width:202px; height:225px; position:absolute; left:309px; top:202px; z-index:1;">
<div id="marqueechildlayer0" style="position:absolute; left:0; top:0; width:202; height:225;" namo_marquee>
<p><FONT color="#0033FF"><span style="font-size:9pt;">맑은 물이 있습니다.</span></FONT></p>
<p><FONT color="#0033FF"><span style="font-size:9pt;">솟아나는 물이
있습니다.</span></FONT></p>
<p><FONT color="#0033FF"><span style="font-size:9pt;">계속해서 솟아
나는 물입니다.</span></FONT></p>
<p><FONT color="#0033FF"><span style="font-size:9pt;">흐르는 물이 있습니다.</span></FONT></p>
<p><FONT color="#0033FF"><span style="font-size:9pt;">누구나 마실 수
있는 물입니다.</span></FONT></p>
<p><FONT color="#0033FF"><span style="font-size:9pt;">살아 있는 물이
있습니</span></FONT><FONT size="2" color="#0033FF">다.</FONT></p>
<p><FONT size="2" color="red">이 물은 생명을 공급합니다.</FONT></p>
</div>
</div> <p> </p>
</td>
</tr>
제목 | 글쓴이 | 날짜 |
---|---|---|
[FreeBSD] bind를 몰아낼 djbdns 설치하기 [5] | DeX™ | 2002.11.26 |
Apache + PHP + Mysql확실한 연동 및 리눅스 재설치 정보 [2] | 최종우 | 2002.11.26 |
리눅스 mysql 사용자 계정주기/삭제하기 [4] | 정인배 | 2002.11.22 |
리눅스 서버를 구축해 보자! #2 [5] | 꼬토 | 2002.11.22 |
리눅스 서버를 구축해 보자! #1 [11] | 꼬토 | 2002.11.21 |
리눅스(레드헷8.0 배포판 기준) 처음 설치하시는 분들을 위한 apm 초간단 팁 [8] | 김종환 | 2002.11.17 |
리눅스 시스템관리 고급 명령어 | 정인배 | 2002.11.16 |
ab 를 이용한 간편한 아파치 성능 측정 [2] | 정인배 | 2002.11.15 |
윈xp pro 를 net 서버로 바꾸기 [7] | 정회철 | 2002.11.13 |
[Lindox] 설치 강좌 쓸때 유용한 명령어 [4] | NeSTY♨™ | 2002.11.05 |
[기초] 퍼미션 값에 대해서 [4] | NeST™y | 2002.11.05 |
[Lindox] 실수로 기본 명령어삭제시 강제 복구하기 | NeSTY♨™ | 2002.11.05 |
[Lindox] 가상콘솔 줄여서 메모리 절약하기.. | NeSTY♨™ | 2002.11.05 |
[기초]커널 2.4.x, quota 셋팅법 | NeST™y | 2002.11.05 |
사용자 자동 등록 쉘스크립트 [1] | 편리 | 2002.11.05 |
OpenBSD3.2 설치가이드 - 완결 [3] | pravda | 2002.11.02 |
네임서버 설정 ver.1 [/etc 폴더편] [2] | 손택수 | 2002.10.24 |
리눅스로 웹호스팅을 하기위해서... [15] | Dopesoul | 2002.10.23 |
APMPack 입니다요. [13] | Blainfo | 2002.10.19 |
각 디렉토리의 역할 [2] | Dopesoul | 2002.10.15 |
==>자신이 직접 만든 스크립트란 얘긴가요?? ㅡ,,ㅡ