[스크립트] 마우스 따라 움직이는 레이어
페이지 정보
작성자 관리자 작성일15-07-13 09:32 조회2,803회 댓글0건본문
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> 마우스를 따라다니는 레이어 예제보기</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>
<div id="마우스" style="width:200px; height:200px; position:absolute; left:10px; top:51px; z-index:1;">
코스트프리
<p><img src="http://www.costfree.co.kr/img/re_logo.gif" border="0"></p>
</div>
<p> </p>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> 마우스를 따라다니는 레이어 예제보기</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>
<div id="마우스" style="width:200px; height:200px; position:absolute; left:10px; top:51px; z-index:1;">
코스트프리
<p><img src="http://www.costfree.co.kr/img/re_logo.gif" border="0"></p>
</div>
<p> </p>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
