본문 바로가기

javascript

애니메이션 죽였다 살렷다 하기 - 가가멜님 제공

나비를 마우스를 갖다대면 제자리에서 날개짓을 하고,다시 마우스를 놓으면
공간을 이동하면서 날개짓을 합니다.

<!--소스-->

<script language='javascript'>
<!--

//속도 조절이 완전하지 않다.
//마우스로 나비를 잡으면 정상으로 된다.

var stopend=false;
function nabimove(sw)
{
var xpok,ypok,speed;

if(sw=='over') stopend= true;
if(sw=='out') stopend= false;
if(sw=='shift') { return false;speed_cont();}
if(stopend== true) return false;

speed=document.fm.ba.options[document.fm.ba.selectedIndex].value;
xpok= Math.floor(Math.random()*80)-40;
ypok= Math.floor(Math.random()*50)-25;

if(navigator.appName=="Netscape")
{
document.layers['nabi'].left+= xpok;
if(document.layers['nabi'].left<40) document.layers['nabi'].left=40;
if(document.layers['nabi'].left>screen.availWidth-100)
   document.layers['nabi'].left= screen.availWidth-140;

document.layers['nabi'].top+= ypok;
if(document.layers['nabi'].top<30)
   document.layers['nabi'].top= 55;
if(document.layers['nabi'].top> screen.height-200)
   document.layers['nabi'].top= screen.height-225;
}
else
{
document.all.nabi.style.pixelLeft+= xpok;
if(document.all.nabi.style.pixelLeft<40) document.all.nabi.style.pixelLeft=40;
if(document.all.nabi.style.pixelLeft>screen.availWidth-100)
   document.all.nabi.style.pixelLeft= screen.availWidth-140;

document.all.nabi.style.pixelTop+= ypok;
if(document.all.nabi.style.pixelTop<30)
   document.all.nabi.style.pixelTop= 55;
if(document.all.nabi.style.pixelTop> screen.height-200)
   document.all.nabi.style.pixelTop= screen.height-225;
}

setTimeout('nabimove()',speed);
}

function speed_cont()
{
setTimeout("nabimove('out')",50);
}

//-->
</script>

<body text=#111133 onload="nabimove()">

<table bgcolor=white align=center>
<tr><th><form name="fm">
  <font size=5 face='바탕'>나비 잡아 봐라!!!</font>  
  속도:<select name="ba" onchange="nabimove('shift')">
   <option value=200>빠르게
   <option value=330  selected>보통
   <option value=500>늦게
   <option value=1000>천천히
  </select>
</form>
</th></tr>
</table>

<p id='nabi' style="position:absolute;left:50%;top:50%;">
  <a href='#' onmouseover="nabimove('over')" onmouseout="nabimove('out')">
  <img src='nabi.gif' border=0></a>
</p>