Google_Eye
2010-04-01 17:47 BlueDream 阅读(1005) 评论(0) 编辑 收藏 举报
|
|
【代码】
<!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> <title> Goog_Eye </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #l_pupil,#r_pupil {position:relative;width:15px;height:15px;left:52px;top:52px;} </style> </head> <body> <table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:20px;" > <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="l_pupil" /> </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="r_pupil" /> </div> </td> </tr> </table> <script type="text/javascript"> var G_EYES = { ER:57, PR:7, MAX_D:37, DOC:document.documentElement || document.body }; G_EYES.STATCK = [], G_EYES.ID = function(id) { return document.getElementById(id); }; G_EYES.M_Pos = function(e) { return {left: e.clientX + G_EYES.DOC.scrollLeft, top: e.clientY + G_EYES.DOC.scrollTop }; }; G_EYES.O_pos = function(el) { var rect = el.getBoundingClientRect(); return {left: rect.left + G_EYES.DOC.scrollLeft, top: rect.top + G_EYES.DOC.scrollTop }; } G_EYES.init = function() { G_EYES.STATCK = [G_EYES.ID('l_pupil'), G_EYES.ID('r_pupil')]; document.onmousemove = function(e) { G_EYES.mousemove(e || window.event);} }; G_EYES.mousemove = function(e) { for(var i = 0, len = G_EYES.STATCK.length; i < len; i++) { var pupil = G_EYES.STATCK[i]; var DF_X = G_EYES.M_Pos(e).left - G_EYES.O_pos(pupil.parentNode).left - G_EYES.PR, DF_Y = G_EYES.M_Pos(e).top - G_EYES.O_pos(pupil.parentNode).top - G_EYES.PR, DIT = Math.sqrt(Math.pow(DF_X, 2) + Math.pow(DF_Y, 2)); if(DIT > G_EYES.MAX_D) { var scale = G_EYES.MAX_D / DIT; DF_X *= scale; DF_Y *= scale; } pupil.style.left = parseInt(DF_X + G_EYES.ER - G_EYES.PR) + 'px'; pupil.style.top = parseInt(DF_Y + G_EYES.ER - G_EYES.PR) + 'px'; } }; G_EYES.init(); </script> </body> </html>