태그인넷 - 자바스크립트


추천스크립트

윈도우 , 프레임

공지창, 스크롤러

테이블, 레이어

이미지, 배경, 배너

폼, 버튼

스크롤바, 타이틀바, 상태바

메뉴, 네비게이션

시간 , 계산 , 숫자

키보드 마우스 이벤트

사용자 정보

쿠키

보안, 인증 , 비밀번호

글자 , 텍스트

동영상, 사운드 멀티미디어

마법사, 생성기

기타, 자바스크립트 게임

태그
 

나모웹에디터 기초강좌

나모 중급 강좌

 키보드 마우스 이벤트

쓰기 : 모든 회원


접속된 회원 및 총회원 목록보기 현재 0분께서 회원으로 접속해 있습니다. 0 회원가입 회원로그인
45 　1/3
운영자 님께서 남기신 글
마우스를 따라다니는 레이어

 미리보기       [스크랩]
Link

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>태그인넷 tagin.net - 마우스를 따라다니는 레이어 예제보기</title>
<meta name="generator" content="Namo WebEditor v6.0">
<script language="JavaScript"><!--
function namosw_mouse_trail() {
  if (!document.nasw_mt_bounce) {
    nasw_mt_dots = new Array();
    document.nasw_mt_bounce = 0.75;  
    document.nasw_mt_seglen = 10;
    document.nasw_mt_sprgk = 10;
    document.nasw_mt_deltat = .01;
    document.nasw_mt_ygrav = 50;
    document.nasw_mt_resist = 10;
    document.nasw_mt_stopvel = 0.1;
    document.nasw_mt_mass = 1;
    document.nasw_mt_stopc = 0.1;
    document.nasw_mt_xgrv = 0;
    document.nasw_mt_xps = 0;
    document.nasw_mt_ndts = namosw_mouse_trail.arguments.length;
    document.nasw_mt_yps = 0;
    document.nasw_mt_dtsize = 11;
    document.nasw_mt_followmouse = true;

    if (navigator.appName=="Netscape" && !document.getElementById) {
      document.captureEvents(Event.MOUSEMOVE);
      document.onMouseMove = namosw_MoveHandler;
    } else if (navigator.appName=="Netscape" && document.getElementById) {
      document.onmousemove = namosw_MoveHandler;
    } else {
      document.onmousemove = namosw_MoveHandlerIE;
    }
  }

  var i = 0;
  for (i = 0; i < document.nasw_mt_ndts; i++)
    nasw_mt_dots[i] = new namosw_dot(namosw_mouse_trail.arguments[i]);

  for (i = 0; i < document.nasw_mt_ndts; i++) {
    nasw_mt_dots[i].obj.left = nasw_mt_dots[i].X;
    nasw_mt_dots[i].obj.top = nasw_mt_dots[i].Y;
  }

  if (navigator.appName=="Netscape" && !document.getElementById)
    namosw_startanimate();
  else
    setTimeout("namosw_startanimate()", 1000);
}

function namosw_dot(layername)
{
  this.X = document.nasw_mt_xps;
  this.Y = document.nasw_mt_yps;
  this.dx = 0;
  this.dy = 0;
  if (navigator.appName=="Netscape" && !document.getElementById)
    this.obj = eval("document." + layername);
  else if (document.getElementById) {
    this.obj = document.getElementById(layername).style;
  } else
    this.obj = eval(layername + ".style");
}

function namosw_startanimate()
{        
  setInterval("namosw_mouse_trail_animate()", 20);
}

function namosw_setInitPositions()
{
  var startloc = document.all.tags("LI");
  var i = 0;
  for (i = 0; i < startloc.length && i < (document.nasw_mt_ndts-1); i++) {
    nasw_mt_dots[i+1].X = startloc[i].offsetLeft +
                  startloc[i].offsetParent.offsetLeft -document.nasw_mt_dtsize;
    nasw_mt_dots[i+1].Y = startloc[i].offsetTop +
                  startloc[i].offsetParent.offsetTop + 2*nasw_mt_dotsIZE;
  }

  nasw_mt_dots[0].X = nasw_mt_dots[1].X;
  nasw_mt_dots[0].Y = nasw_mt_dots[1].Y - document.nasw_mt_seglen;
}

function namosw_MoveHandler(e)
{
  document.nasw_mt_xps = e.pageX;
  document.nasw_mt_yps = e.pageY;          
  return true;
}

function namosw_MoveHandlerIE() {
  document.nasw_mt_xps = window.event.x + document.body.scrollLeft;
  document.nasw_mt_yps = window.event.y + document.body.scrollTop;          
}

function namosw_vec(X, Y)
{
  this.X = X;
  this.Y = Y;
}

function namosw_springForce(i, j, spring)
{
  var dx = (nasw_mt_dots[i].X - nasw_mt_dots[j].X);
  var dy = (nasw_mt_dots[i].Y - nasw_mt_dots[j].Y);
  var len = Math.sqrt(dx*dx + dy*dy);
  if (len > document.nasw_mt_seglen) {
    var springF = document.nasw_mt_sprgk * (len - document.nasw_mt_seglen);
    spring.X += (dx / len) * springF;
    spring.Y += (dy / len) * springF;
  }
}

function namosw_mouse_trail_animate() {        
  var start = 0;
  if (document.nasw_mt_followmouse) {
    nasw_mt_dots[0].X = document.nasw_mt_xps;
    nasw_mt_dots[0].Y = document.nasw_mt_yps;        
    nasw_mt_dots[0].obj.left = nasw_mt_dots[0].X;                        
    nasw_mt_dots[0].obj.top =  nasw_mt_dots[0].Y;                
    start = 1;
  }
    
  for (i = start ; i < document.nasw_mt_ndts; i++ ) {
    var spring = new namosw_vec(0, 0);
      if (i > 0)
        namosw_springForce(i-1, i, spring);
      if (i < (document.nasw_mt_ndts - 1))
        namosw_springForce(i+1, i, spring);
        
      var resist = new namosw_vec(-nasw_mt_dots[i].dx * document.nasw_mt_resist, -nasw_mt_dots[i].dy * document.nasw_mt_resist);
      var accel = new namosw_vec((spring.X + resist.X)/document.nasw_mt_mass +document.nasw_mt_xgrv,
                          (spring.Y + resist.Y)/ document.nasw_mt_mass + document.nasw_mt_ygrav);    

      nasw_mt_dots[i].dx += (document.nasw_mt_deltat * accel.X);
      nasw_mt_dots[i].dy += (document.nasw_mt_deltat * accel.Y);

      if (Math.abs(nasw_mt_dots[i].dx) <document.nasw_mt_stopvel &&
        Math.abs(nasw_mt_dots[i].dy) <document.nasw_mt_stopvel &&
        Math.abs(accel.X) < document.nasw_mt_stopc &&
        Math.abs(accel.Y) < document.nasw_mt_stopc) {
        nasw_mt_dots[i].dx = 0;
        nasw_mt_dots[i].dy = 0;
      }

      nasw_mt_dots[i].X += nasw_mt_dots[i].dx;
      nasw_mt_dots[i].Y += nasw_mt_dots[i].dy;

      var height, width;
      if (navigator.appName=="Netscape") {
        height = window.innerHeight + window.pageYOffset;
        width = window.innerWidth + window.pageXOffset;
      } else {        
        height = document.body.clientHeight + document.body.scrollTop;
        width = document.body.clientWidth + document.body.scrollLeft;
      }

      if (nasw_mt_dots[i].Y >=  height -document.nasw_mt_dtsize - 1) {
        if (nasw_mt_dots[i].dy > 0)
           nasw_mt_dots[i].dy =document.nasw_mt_bounce * -nasw_mt_dots[i].dy;
        nasw_mt_dots[i].Y = height -document.nasw_mt_dtsize - 1;
      }
      if (nasw_mt_dots[i].X >= width -document.nasw_mt_dtsize) {
        if (nasw_mt_dots[i].dx > 0)
          nasw_mt_dots[i].dx =document.nasw_mt_bounce * -nasw_mt_dots[i].dx;
        nasw_mt_dots[i].X = width -document.nasw_mt_dtsize - 1;
      }
      if (nasw_mt_dots[i].X < 0) {
        if (nasw_mt_dots[i].dx < 0)
          nasw_mt_dots[i].dx =document.nasw_mt_bounce * -nasw_mt_dots[i].dx;
        nasw_mt_dots[i].X = 0;
      }

      nasw_mt_dots[i].obj.left = nasw_mt_dots[i].X;                        
      nasw_mt_dots[i].obj.top =  nasw_mt_dots[i].Y;                
    }
}

// -->
</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="namosw_mouse_trail('마우스')">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="마우스" style="width:200px; height:200px; position:absolute; left:10px; top:51px; z-index:1;">
    태그인넷 tagin.net
    <p><img src="http://tagin.net/img/logo.gif" border="0"></p>
</div>
<p> </p>
</body>

</html>
리스트   이전 다음


Copyright 1999-2010 Zeroboard / skin by 신의키스

Copyright 2004 tagin.net All rights reserved