Googel首页眼睛

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Eyes.aspx.cs" Inherits="Eyes" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <SCRIPT src="http://www.google.cn/ig/extern_js/f/CgJlbhICdXMrMAE4ACw/0TBAQTjt0HQ.js"></SCRIPT>
        <style>
        #EYES_pupil0__MODULE_ID__,#EYES_pupil1__MODULE_ID__ {
          position:relative;
          width:15px;
          height:15px;
          left:52px;
          top:52px;
        }
        </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   

<table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:5px;">
<tr>
  <td background="http://www.google.com/ig/modules/eyes_content/eye-r.gif">
   <div style="width:117px;height:117px;">
    <img src="http://www.google.com/ig/modules/eyes_content/pupil.gif" id="EYES_pupil0__MODULE_ID__">
   </div>
  </td>
  <td background="http://www.google.com/ig/modules/eyes_content/eye-y.gif">
   <div style="width:117px;height:117px;">
    <img src="http://www.google.com/ig/modules/eyes_content/pupil.gif" id="EYES_pupil1__MODULE_ID__">
    </div>
  </td>
</tr>
</table>
        <script type="text/javascript">
        <!-- With thanks to Keith Packard and Jeremy Huxtable and Dylan Parker -->

        var EYES__MODULE_ID__ = {
          MAX_DIST : 37,     // furthest pupil can move from center
          EYE_RADIUS : 59,   // eye image width / 2
          PUPIL_RADIUS : 7,  // pupil image width / 2
          pupils : [],

          init : function() {
            _IG_AddDOMEventHandler(document, "mousemove", EYES__MODULE_ID__.moveEyes);
            EYES__MODULE_ID__.pupils =
              [ _gel("EYES_pupil0__MODULE_ID__"), _gel("EYES_pupil1__MODULE_ID__") ];
          },

          moveEyes : function(e) {
            if (!e) e = window.event;
            var app = EYES__MODULE_ID__;

            for (var i = 0; i < app.pupils.length; i++) {
              var pupil = app.pupils[i];

              // The middle points of the eyes
              var midx = app.getPagePos(pupil.parentNode,true) + app.EYE_RADIUS;
              var midy = app.getPagePos(pupil.parentNode,false) + app.EYE_RADIUS;

              // Page scroll
              var scrollx = 0;
              var scrolly = 0;
              if (typeof(window.pageXOffset) == 'number') {
                scrollx = window.pageXOffset;
                scrolly = window.pageYOffset;
              } else {
                scrollx = document.documentElement.scrollLeft;
                scrolly = document.documentElement.scrollTop;
              }

              // The distX/distY from eye middles to the mouse
              var distX = e.clientX + scrollx - midx;
              var distY = e.clientY + scrolly - midy;

              // The absolute distance from eye middles to the mouse
              var dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));

              if (dist > app.MAX_DIST) {
                // mouse out of eyeball, scale distX/distY to be at eyeball edge
                var scale = app.MAX_DIST / dist;
                distX *= scale; distY *= scale;
              }

              // Place the pupil appropriately
              pupil.style.left = parseInt(distX + app.EYE_RADIUS - app.PUPIL_RADIUS) + "px";
              pupil.style.top = parseInt(distY + app.EYE_RADIUS - app.PUPIL_RADIUS) + "px";
            }
          },

          // get page coords for an element
          getPagePos : function(el, left) {
            var val=0;
            while(el != null) {
              val += el["offset"+(left?"Left":"Top")];
              el = el.offsetParent;
            }
            return val;
          }

        };

        EYES__MODULE_ID__.init();

        </script>

    </div>
    </form>
</body>
</html>

posted @ 2009-06-10 09:47  戒子  阅读(746)  评论(1编辑  收藏  举报