웹마스터 팁
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
스크롤바색상바꿔주는프로그램(수정) [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 |
▩시작 정지가 가능한 테이블 스크롤 메시지 | ▩윤미 | 2002.02.27 |
▩휠마우스처럼 사용하기.. [6] | ▩윤미 | 2002.02.26 |
▩두문장을 blur효과주며 보여주기 [3] | ▩윤미 | 2002.02.26 |
▩자바스크립, 계산기 소스 (기본) [2] | ▩윤미 | 2002.02.26 |
▩문서선택 &소스선택을 위한 셀렉트 스크립트 | ▩윤미 | 2002.02.26 |
▩그림 슬라이드 되고, 마우스 대면 그림 멈추는 스크립트 [1] | ▩윤미 | 2002.02.26 |
▩찾기 기능을 내 홈페이지에 넣어보자 [1] | ▩윤미 | 2002.02.26 |
▩셀블렌딩( 테이블 색 서서히 변화주기효과) | ▩윤미 | 2002.02.26 |
▩화면에 무자기로 뜨게하는 물방울 (다른 모양가능) | ▩윤미 | 2002.02.26 |
▩키보드글씨가 그대로 화면에 나타나는 스크립트 [5] | ▩윤미 | 2002.02.26 |
==>자신이 직접 만든 스크립트란 얘긴가요?? ㅡ,,ㅡ