GOOGLE网页眼睛代码_随鼠标转动的眼睛代码调用方法

发布:半支烟 | 发布时间: 2009年6月23日

今天无意间打开GOOGLE的首页，移动到最底部的时候突然发现一双眼球跟随着我鼠标方向而移动，感觉特别有趣。闲着无聊就将它的源代码复制下来分析了一下。
看到它眼睛代码处调用了外部连接文件xml，http://www.google.com/ig/modules/china/eyes.xml 我想跟这个肯定有关，复制下来后再分析了一番，终于被我调试出来了，呵呵，赶紧用在了我的博客上，我想应该蛮有趣的。现在将代码贡献给大家参考。
复制以下代码：
<SCRIPT src="http://www.520750.com/google_eyes/0TBAQTjt0HQ.js"></SCRIPT>
<style>
#EYES_pupil0__MODULE_ID__,#EYES_pupil1__MODULE_ID__ {
position:relative;
width:15px;
height:15px;
left:52px;
top:52px;
}
</style>

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>
如果你觉得太麻烦的话，可以提供你外部调用：<iframe src="http://www.520750.com/google_eyes.htm" scrolling=no width=240 height=120 marginwidth=0 marginheight=0 frameborder=0 ></iframe>

标签: