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>