웹마스터 팁

  2. Support
  3. 웹마스터 팁

마우스 따라다니 면서 원형을 그리면서 돌아가는것...

2006.04.07 12:15

왜,그러지

마우스 따라다니는 자바 소스 입니다..
마우스 주면을 빙글빙글 돌면서 따라 다닙니다..
수정을 할 것은 별로 없으며...어두운 배경화면에 사용을 하시면 됩니다..
밝은 배경에는 잘 안 보이네요..
<body> 부분에 복사 하여 붙여넣어 주시면 돼요...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<!-- 자바소스 여기서 부터-->
<BODY bgcolor="black">
<LAYER NAME="a0" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer1" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a1" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer2" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a2" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer3" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a3" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer4" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a4" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer5" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a5" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer6" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>
<LAYER NAME="a6" LEFT="10" TOP="10" VISIBILITY="show" BGCOLOR="yellow" CLIP="0,0,3,3" id="layer7" width="200" height="200" z-index="1">
    <p> </p>
</LAYER>

<p><script language="JavaScript">
<!--

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}

else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
for ( i = 0 ; i < totaldivs ; i++ )
{
var tempdiv=document.all.starsDiv.all[i].style
tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
}

else if (document.layers)
{
for ( j = 0 ; j < 7 ; j++ )
{
var templayer="a"+j
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>
</BODY><!--여기까지 자바 소스 적용을 하시면 됩니다.-->
</HTML>


미리보기 http://kmsmaru.com/javascript_cursor/Dancing_Stars_Cursor.html
출처;http://www.dynamicdrive.com/dynamicindex13/star.htm
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[동영상] 제2강 연산자 [1] 인테리어뱅크 2006.04.11
[동영상] 제1강 자바 스크립트의 기본 개념 인테리어뱅크 2006.04.11
페이지를 풀창으로 띄우는 방법 [1] 인테리어뱅크 2006.04.11
드래그금지 태그 풀어보기 [2] 인테리어뱅크 2006.04.10
홈페이지 TOP 버튼 만들어 보기 [7] 인테리어뱅크 2006.04.10
마우스 따라다니 면서 원형을 그리면서 돌아가는것... 왜,그러지 2006.04.07
DHTML 계산기 왜,그러지 2006.04.05
마우스 따라다니는 아날로그 시계 [1] 왜,그러지 2006.04.05
텍스트 위에 네온 빛이 이동하는 효과.. 왜,그러지 2006.04.05
3D 메세지 나타나기... 왜,그러지 2006.04.05
두가지 색으로 깜박거리는 텍스트 keymove 2006.03.17
게임상의 캐릭터와 대화하는 것 같이 보이기(?) [4] 세강 :D 2006.02.24
firefox에서 location.href안 먹힐 때 해결법 [1] 꿀벙이 2006.02.24
[동영상강좌] 제20회차 - 다중 if문 아이티스터디 2006.02.02
[동영상강좌] 제19회차 - 조건문 if 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제18회차 - 문자열 연산자, 조건연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제17회차 - 논리연산자, 비교연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제16회차 - 산술연산자, 할당연산자, 증감연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제15회차 - 변수 선언하기 아이티스터디 2006.02.02
[동영상강좌] 제14회차 - 스크립트내 html삽입하기 아이티스터디 2006.02.02
태그 쓰기