웹마스터 팁
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
배너 링크를 바로 클립보드로 카피하기 [5] | Legend | 2002.04.01 |
[v]최근 업데이트 시간을 자동으로 나타내 보자! [3] | :+:zZion:+: | 2002.03.30 |
[v]하나더! 해상도별 다른 페이지 보여주기 | :+:zZion:+: | 2002.03.30 |
[v]운영 체제별 다른 페이지 보여주기 -_-;v [3] | ┏ⓩZion┛ | 2002.03.30 |
레이어의 상대위치 지정 방법(position:absolute에서...) [2] | Legend | 2002.03.29 |
다이나믹 HTML 스크립트 - 간편 공지사항에.... [1] | ▩윤미 | 2002.03.28 |
[자바스트립트]bidoo님의 레벨메타식 체크박스 보강 | 탐그루 | 2002.03.20 |
:: DB 필요없는 일정관리 .. 거창하게.. -.- [2] | 고전지기 | 2002.03.15 |
자동 팝업창띠우기 소스 [4] | 이슈™ | 2002.03.13 |
홈페이지 패스워드 걸기 소스 [7] | 이슈™ | 2002.03.13 |
스크롤바색상바꿔주는프로그램(수정) [3] | 이슈™ | 2002.03.13 |
▩마우스 주위에 3D 처럼 뱅뱅도는 글자 [6] | ▩윤미 | 2002.03.11 |
테두리가 스믈스믈한 -_-;; | 란즈 | 2002.03.02 |
빠르게 이동하는 텍스트 | 란즈 | 2002.03.02 |
깜박거리는 문자 [1] | 란즈 | 2002.03.02 |
강한 인상을주는 (?) 환영메세지 -_-; [5] | 란즈 | 2002.03.02 |
텍스트 지진(?)효과 내기 | 란즈 | 2002.03.02 |
페이지 사용안하고 팝업띄우기 [4] | 란즈 | 2002.03.02 |
▩물결 처럼 흐르는 것같은 이미지 슬라이드 쇼 [2] | ▩윤미 | 2002.02.28 |
▩마우스를 대면 하이퍼텍스트 스크롤하는 법 (링크할수있음) | ▩윤미 | 2002.02.28 |
==>자신이 직접 만든 스크립트란 얘긴가요?? ㅡ,,ㅡ