`

Google眼睛代码

阅读更多
google眼睛很好看,于是想弄下来填充一下自己的博客。



读了一下代码,发现google眼睛的代码在这里

http://www.google.com/ig/modules/china/eyes.xml

于是将里面的HTML保存下来,结果还是不行。

肯定还需要一个JS文件,经过查找发现是这个“0TBAQTjt0HQ.js”;

将它引用到头部,大功告成!

完整代码:
<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>

<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>


 


分享到:
评论

相关推荐

    GOOGLE眼睛源代码

    【谷歌眼睛源代码】是一个基于C#编程语言的项目,主要功能是实现对鼠标全屏位置的实时捕获以及窗口非标题部分的拖动操作。这个项目的核心在于提供了一种直观且用户友好的方式来监控和操作窗口。下面将详细阐述这个...

    谷歌眼睛---核心代码

    包含了谷歌眼睛的全部核心代码,可以用记事本、Dreamweaver、写字板、html等打开

    google眼睛效果

    【Google眼睛效果】是一种在网页或应用程序中实现的互动视觉元素,它模仿了谷歌公司标志性的“眼睛”动画。这个JS特效(JavaScript特效)通常用于增加用户界面的趣味性和交互性,使用户在浏览时有更生动的体验。在...

    类似google的两个眼睛转圈的js

    标题中的“类似google的两个眼睛转圈的js”是指一种基于JavaScript和HTML实现的互动元素,它模拟了谷歌个性化主页上的眼睛动画效果。这个效果通常包括两只眼睛在页面上转动或者跟随鼠标移动,为用户带来一种有趣且...

    谷歌3d眼镜代码

    google 3d眼镜上的双屏显示的代码,支持unity3d开发

    谷歌眼镜核心源码

    在开源软件中,许可协议定义了其他人可以如何使用、修改和分发代码。对于谷歌眼镜这样的项目,可能是GPL、Apache或MIT等开放源码许可,这允许开发者自由地查看和使用源码。 2. CREDITS:此文件列出了项目的主要贡献...

    Google Chrome浏览器保护视力插件Stylish

    总的来说,Stylish是一款针对Google Chrome浏览器的视力保护插件,它允许用户自定义网页样式以减轻眼睛疲劳。通过开源的源码,开发者和爱好者可以研究其工作原理并进行个性化改造。而“extension_1_2_4.crx”则是这...

    jq眼睛随鼠标移动而旋转特效.zip

    接下来,编写jQuery代码来实现眼睛的动态效果。这通常涉及到以下步骤: 1. 选择眼睛元素,可以使用`$("#eye")`或`$(".eyes")`这样的选择器,取决于眼睛元素的ID或类名。 2. 注册鼠标移动事件监听器,使用`.on('...

    google-dark-plus-theme:Visual Studio代码Google Dark Plus主题

    使用Google Dark Plus主题可以提升编程时的视觉体验,使得代码更加突出,同时减少眼睛对亮色的敏感度。在进行长时间编码工作时,这种深色主题能帮助降低视觉疲劳,提高工作效率。配合Visual Studio Code的其他功能,...

    code review tool from google

    根据给定的文件信息,我们可以提炼出关于代码审查(Code Review)及其在谷歌开发流程中的应用的关键知识点。 ### 什么是代码审查? 代码审查是一种软件工程实践,其中一名开发者编写代码后,由另一名开发者进行...

    CardboardSDK注释代码

    《CardboardSDK注释代码详解》 CardboardSDK,全称为Google Cardboard SDK,是Google为开发者提供的一个轻量级虚拟现实(VR)开发工具包,主要用于构建在Android平台上运行的简单VR应用。本文将深入解析Cardboard...

    Android中的人脸识别代码

    而Google的ML Kit提供了Face Detection API,可以方便地集成到Android应用中,它支持实时的面部检测和特征识别,包括面部位置、表情、眼睛是否睁开等。 在"TestFaceDetector"这个项目中,我们可以推测它是使用了...

    基于谷歌Mediapipe框架设计的视力检测系统源码+项目说明(后端采用Flask,手势识别模型是自己重新训练的模型).zip

    【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、...基于谷歌Mediapipe框架设计的视力检测系统源码+项目说明(后端采用Flask,手势识别模型是自己重新训练的模型).zip

    android 电子书阅读器源代码

    8. **夜间模式**:为了保护用户的眼睛,源代码可能会包含切换白天和夜间模式的选项,调整界面的亮度和色温。 9. **字体和排版设置**:用户可以根据个人喜好调整字体大小、样式和行间距,源代码可能包含自定义字体...

    AndroidStudio代码颜色配色方案(Sublime)

    Monokai是一种经典的暗色主题,其设计思路在于让代码的关键部分如关键字、变量、字符串等有明显的视觉区分,而背景则保持相对低调,降低对眼睛的刺激。这种配色方案在程序员社区中非常流行,因为它的色彩层次分明,...

    CSS3绘制QQ企鹅图片动画代码.rar

    在本资源中,我们主要探讨的是使用CSS3技术来绘制一个动态的QQ企鹅图片,兼容包括Internet Explorer和Google Chrome在内的主流浏览器。CSS3是一种强大的样式表语言,它极大地扩展了CSS2.1的功能,引入了许多新的选择...

    android 应用 源代码——阅读器 通通免费

    6. **云同步**:为了在不同设备间同步阅读进度,应用需要集成云服务API(如Google Drive或Dropbox)进行数据同步。 7. **离线下载**:允许用户下载书籍以便离线阅读。这涉及网络编程,如HTTP/HTTPS请求,以及文件...

    基于TensorFlow人脸识别源代码

    TensorFlow,作为Google开发的开源深度学习框架,为构建和训练复杂的神经网络提供了强大的支持,尤其在图像处理任务中表现出色。我们将讨论以下几个关键知识点: 1. **人脸识别基础**:人脸识别是计算机视觉中的一...

    机器人感知_代码,机器人的感知系统组成,Python

    在机器人技术领域,感知系统是机器人与环境交互的关键部分,它赋予了机器人“眼睛”和“耳朵”,使其能够理解周围的世界。在这个主题中,“机器人感知_代码”涉及到使用ROS(Robot Operating System,机器人操作系统...

Global site tag (gtag.js) - Google Analytics