google眼睛源代码

最新推荐文章于 2021-08-03 23:34:03 发布

转载最新推荐文章于 2021-08-03 23:34:03 发布 · 1.1k 阅读

文章标签：

#google #function #xhtml #image #html #border

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的眼球跟随鼠标移动的效果。通过计算鼠标位置与眼球中心的距离，确保眼球始终跟随用户的鼠标移动，同时限制了眼球的移动范围以模仿真实的眼睛行为。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#EYES_pupil0114,#EYES_pupil1114{ position:relative; width:15px; height:15px; left:52px; top:52px; }</style> </head> <body> <div> <table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:5px;" mce_style="margin-top:5px;"> <tr> <td background="http://www.google.cn/ig/modules/eyes_content/eye-r.gif"> <div style="width:117px;height:117px;"> <img src="http://www.google.cn/ig/modules/eyes_content/pupil.gif" mce_src="http://www.google.cn/ig/modules/eyes_content/pupil.gif" id="EYES_pupil0114"> </div> </td> <td background="http://www.google.cn/ig/modules/eyes_content/eye-y.gif"> <div style="width:117px;height:117px;"> <img src="http://www.google.cn/ig/modules/eyes_content/pupil.gif" mce_src="http://www.google.cn/ig/modules/eyes_content/pupil.gif" id="EYES_pupil1114"> </div> </td> </tr> </table> </div> <mce:script type="text/javascript"> function $(id){ return document.getElementById(id); } var EYES114 = { 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", EYES114.moveEyes); document.onmousemove = EYES114.moveEyes; EYES114.pupils = [$("EYES_pupil0114"), $("EYES_pupil1114")]; }, moveEyes: function(e) { if (!e) e = window.event; var app = EYES114; for (var i = 0; i < app.pupils.length; i++) { var pupil = app.pupils[i]; var midx = app.getPagePos(pupil.parentNode, true) + app.EYE_RADIUS; var midy = app.getPagePos(pupil.parentNode, false) + app.EYE_RADIUS; 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; } var distX = e.clientX + scrollx - midx; var distY = e.clientY + scrolly - midy; var dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2)); if (dist > app.MAX_DIST) { var scale = app.MAX_DIST / dist; distX *= scale; distY *= scale; } pupil.style.left = parseInt(distX + app.EYE_RADIUS - app.PUPIL_RADIUS) + "px"; pupil.style.top = parseInt(distY + app.EYE_RADIUS - app.PUPIL_RADIUS) + "px"; } }, getPagePos: function(el, left) { var val = 0; while (el != null) { val += el["offset" + (left ? "Left": "Top")]; el = el.offsetParent; } return val; } }; EYES114.init(); // --></mce:script> </body> </html>