■ xeyes.htm ■

戻る 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="ja">

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<TITLE>xeyes もどき</TITLE>
</HEAD>

<BODY BGCOLOR="#CCFFFF">
<CENTER>
<BR><BR>
<B><FONT SIZE="+1" COLOR="#CC0000">xeyes もどき</FONT></B>
<BR><BR><BR>

<DIV ID="eyes" STYLE="position:relative; width:240px; height:160px">
<IMG SRC="images/eyes.gif" WIDTH=240 HEIGHT=160>
<SPAN ID="eyeball0" STYLE="position:absolute; width:19px; height:25px; left:81px; top:68px">
<IMG SRC="images/eyeball.gif" WIDTH=19 HEIGHT=25>
</SPAN>
<SPAN ID="eyeball1" STYLE="position:absolute; width:19px; height:25px; left:141px; top:68px">
<IMG SRC="images/eyeball.gif" WIDTH=19 HEIGHT=25>
</SPAN>
</DIV>

</CENTER>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--

function move(e) {
  // 目玉の縦横比は 4:3
  var dx = (e.clientX + pageXOffset - (document.getElementById("eyes").offsetLeft + 60)) * 4;
  var dy = (e.clientY + pageYOffset - (document.getElementById("eyes").offsetTop  + 80)) * 3;
  var i;
  for(i = 0; i < 2; i++) {
    var d = dx * dx + dy * dy;
    var dx2, dy2;
    if(d > 14400) {  // マウスは目玉の外
      d = Math.sqrt(d);
      dx2 = dx * 120 / d;
      dy2 = dy * 120 / d;
    }
    else {
      dx2 = dx;
      dy2 = dy;
    }
    dx2 = Math.floor(Math.abs(dx2) / 4 + 0.5);
    if(dx < 0)
      dx2 = - dx2;
    dy2 = Math.floor(Math.abs(dy2) / 3 + 0.5);
    if(dy < 0)
      dy2 = - dy2;
    if(i)  // 左目
      dx2 += 120;
    with(document.getElementById("eyeball" + String(i)).style) {
      left = String(51 + dx2) + "px";
      top  = String(68 + dy2) + "px";
    }
    dx -= 480;
  }
}

  document.onmousemove = move;

//-->
</SCRIPT>

</BODY>

</HTML>