`

google眼睛的实现

阅读更多

没事写的.

js实现眼睛随鼠标运动.就是眼睛一直盯着鼠标看.

图片:

pupil:       eye-r:     eye-y:

 

就是三图片.  我写的时候用的是gif格式的.但是传到巴巴变相册之后好像变成了jpg.但问题不大.

 

效果图:


代码:

 

<!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=utf-8" />
<title>JavaScript眼睛</title>
<style>
body{
height:1000px;
}
</style>
<script>
      var eye1_X=0;
	  var eye1_Y=0;
	  var eye2_X=0;
	  var eye2_Y=0;
	  var R=43;
  
  function getCenter(){
      eye1_X=document.getElementById("eyeborder1").offsetLeft+document.getElementById("eyeborder1").offsetWidth/2-7;
	  eye1_Y=59;
	  eye2_X=document.getElementById("eyeborder2").offsetLeft+document.getElementById("eyeborder2").offsetWidth/2-7;
	  eye2_Y=59;
	  document.getElementById("eye1_id").style.posTop=eye1_Y;
	  document.getElementById("eye1_id").style.posLeft=eye1_X;
	  document.getElementById("eye2_id").style.posTop=eye2_Y;
	  document.getElementById("eye2_id").style.posLeft=eye2_X;
  }
  
  function moveEye(event){
	  //得到眼框的中心
	 /* var eye1_X=379;var eye1_Y=58;
	  var eye2_X=495;var eye2_Y=58;*/
	  eye1_X=document.getElementById("eyeborder1").offsetLeft+document.getElementById("eyeborder1").offsetWidth/2-7;
	  eye1_Y=59;
	  eye2_X=document.getElementById("eyeborder2").offsetLeft+document.getElementById("eyeborder2").offsetWidth/2-7;
	  eye2_Y=59;
	  //鼠标位置判断
	  var r1=Math.sqrt((event.clientX-eye1_X)*(event.clientX-eye1_X)+(event.clientY-eye1_Y)*(event.clientY-eye1_Y));
	  if(r1<R){//鼠标在圆1内部
	       document.getElementById("eye1_id").style.posTop=event.clientY;
	       document.getElementById("eye1_id").style.posLeft=event.clientX;
	  }else{
	       document.getElementById("eye1_id").style.posLeft=R*(event.clientX-eye1_X)/r1+eye1_X;
		   document.getElementById("eye1_id").style.posTop=R*(event.clientY-eye1_Y)/r1+eye1_Y;
	  }
	  
	  var r2=Math.sqrt((event.clientX-eye2_X)*(event.clientX-eye2_X)+(event.clientY-eye2_Y)*(event.clientY-eye2_Y));
	  if(r2<R){//鼠标在圆2内部
	        document.getElementById("eye2_id").style.posTop=event.clientY;
	        document.getElementById("eye2_id").style.posLeft=event.clientX;
	  }else{
	        document.getElementById("eye2_id").style.posLeft=R*(event.clientX-eye2_X)/r2+eye2_X;
		    document.getElementById("eye2_id").style.posTop=R*(event.clientY-eye2_Y)/r2+eye2_Y;
	  }
  }

</script>
</head>
<body id="mybody" onmousemove="moveEye(event)"  onload="getCenter()">
<div id="eyeborder"><center><img id="eyeborder1" src="eye-r.gif"><img id="eyeborder2" src="eye-y.gif"/></center></div>
<div id="text_id"></div>
<div style="position:absolute;" id="eye1_id"><img src="pupil.gif"></div>
<div style="position:absolute;" id="eye2_id"><img src="pupil.gif"></div>
</body>
</html>
  • 大小: 419 Bytes
  • 大小: 8.1 KB
  • 大小: 7.3 KB
  • 大小: 4.9 KB
分享到:
评论

相关推荐

    google眼睛效果

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

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

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

    GOOGLE眼睛源代码

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

    谷歌眼镜核心源码

    谷歌眼镜(Google Glass)是一款由谷歌公司开发的增强现实智能眼镜,它集成了显示屏、摄像头、音频设备和无线通信模块,允许用户通过语音命令或手势进行交互,实现查看信息、拍摄照片、录制视频等功能。这款产品在...

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

    【jq眼睛随鼠标移动而旋转特效】是一种基于jQuery库实现的互动性视觉效果,它能够为网页增添一种独特的用户体验。这种特效使得一个或多个“眼睛”元素在网页上跟随用户的鼠标指针移动,仿佛眼睛在观察鼠标的位置,...

    ListView下拉刷新模仿微信眼睛

    1. **SwipeRefreshLayout**:这是Android SDK中提供的一种用于实现下拉刷新的组件,它是Google推荐的实现方式。通过在ListView外部包裹一个SwipeRefreshLayout,可以轻松添加下拉刷新功能。当用户下拉时,...

    MFC实现类似Google Eye的小软件(很美)

    在MFC中实现这样的效果,开发者可能需要自定义控件或者利用现有控件进行扩展,例如,通过重绘(OnPaint)函数来绘制眼睛的图形,并结合定时器(CTimer)来实现动画效果。 界面美化是这个小软件的一大亮点。在MFC中...

    谷歌眼镜UI设计准则

    总结起来,谷歌眼镜UI设计准则强调了简洁、高效、人性化的交互设计,以及充分利用镜像API和GDK来实现功能。设计师需要深思熟虑如何在有限的显示空间内传达信息,同时考虑设备的特殊使用场景和用户行为。通过遵循这些...

    如何使用谷歌地球

    图像的清晰度取决于“Eye Alt”值,即观察者眼睛与地面的距离。此外,谷歌地球还提供了大气层效果、海床和简要星象图,进一步增强了真实感。 #### 主界面详解 - **搜索面板**:用于查找具体位置或规划行车路线,...

    Dark Reader 谷歌浏览器夜间模式插件

    《Dark Reader:谷歌浏览器的夜间模式利器》 在数字化时代,我们的生活与互联网紧密相连,浏览器作为接触网络世界的主要窗口,其用户体验至关重要。对于长时间使用电脑的用户来说,减轻眼睛疲劳成为了不可忽视的...

    基于Tensorflow的人脸识别系统设计与实现.pdf

    TensorFlow是Google开发的开源机器学习框架,提供了多种工具和库来实现机器学习模型的设计、训练和部署。TensorFlow支持多种编程语言,如Python、C++等。 三、人脸识别系统设计 人脸识别系统设计主要涉及到两个...

    谷歌插件 过滤广告和护眼插件 拖到拓展程序中即可安装

    在"谷歌插件"这个压缩包中,包含了实现上述功能的.crx文件。这是一个特殊的文件格式,用于封装Chrome扩展的所有资源和代码。用户在下载并解压这个文件后,只需按照描述所述,将.crx文件拖到Chrome浏览器的"更多工具...

    Android 实现录音,拍照,人脸识别

    总结,Android平台提供了强大的多媒体功能,通过`MediaRecorder`和`Camera`类可以实现录音和拍照,而人脸识别则可以通过集成Google Play服务中的Face API实现。这些功能的运用,可以为用户带来更加丰富和便捷的交互...

    谷歌浏览器 4.0.223.11 Dev 多语绿色便携版┊简单高效的Web浏览工具

    字体大小的适配对于网页阅读至关重要,合适的字体大小可以提高可读性,减少用户的眼睛疲劳,从而提升整体浏览体验。 作为多语绿色便携版,谷歌浏览器4.0.223.11 Dev无需安装,可以直接从“Chrome.Portable”这个...

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

    此外,Stylish插件还支持JavaScript和CSS代码编辑,这意味着高级用户可以根据自己的需求编写自定义脚本,实现更复杂的样式调整。例如,你可以修改网页元素的间距、去除广告、甚至调整网页的响应式布局,使之更适合...

    code review tool from google

    - **捕获更多错误**:双倍的眼睛能发现更多的错误,尤其是在早期阶段,这可以节省大量的调试时间。 - **执行编码标准和风格指南**:有助于保持整体的可读性和代码质量。 - **新开发者培养**:通过从错误中学习,而...

    能实现眼睛交互的透视式OLED显示器

    与现有的设备相比,如谷歌眼镜,这种新型的透视式OLED显示器在性能上有显著优势,包括更高的分辨率、更宽的视角和更好的眼睛追踪能力。这些进步预示着未来个人电子设备将更加智能化,如增强现实眼镜,它们不仅能呈现...

    好用的谷歌插件

    5. **Tampermonkey**:油猴脚本管理器,允许用户安装自定义的JavaScript脚本,实现对网页的个性化修改,比如增强YouTube功能、去除网页限制等。 6. **uBlock Origin**:轻量级广告拦截器,比AdBlock更节省资源,...

    实现一个类似美颜相机(美图秀秀应用)的Android应用程序

    - 使用`CameraX`库,它是Google推荐的现代相机API,简化了相机功能的集成,如预览、拍照、录制视频等。 4. **相机预览**: - 创建`Preview`类实例,将相机预览显示在`SurfaceView`或`TextureView`上。 - 调整...

    FaceFilter,msqrd与snapchat类人脸过滤器的实现.zip

    本项目将深入探讨如何利用Google Mobile Vision API来实现实时的人脸检测和过滤功能。 Google Mobile Vision API是Google提供的一个强大的工具,它能够帮助开发者在Android平台上进行图像处理,包括但不限于人脸...

Global site tag (gtag.js) - Google Analytics