`

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
分享到:
评论

相关推荐

    Scratch 手速判断游戏:反弹之神.sb3

    游戏警报:潜入“反弹”,这是一种充满活力的街机体验,你的反应主宰了竞技场!受youtuber Dani 一天游戏挑战的启发,你就是一个肩负使命的球:发射、得分、生存! 为你的射击蓄力:按住鼠标等待射击时间。 瞄准并发射:释放以朝光标射击。距离等于速度和弹跳力! 得分:击球得分。 避开格林:他们是游戏终结者! 阻止红色和紫色:如果他们垫底,他们会伤害你的健康。紫色添加了随机反弹的狂野扭曲! SJA 分析数据: · 代码数量: 代码总数:4775 ,有效代码:4671 ,代码块:164 ; · 高级编辑: 扩展种类:2 ,函数定义:49 ,变量 & 列表定义:165 ; · 资源数量: 角色数:12 ,造型数量:444 ,音频数量:54 ; · 资源大小: 工程大小:19.1MB ,音频大小:15.4MB ,造型大小:1.7MB 。 此后仍有作品或有趣游戏,可以进行学习与借鉴。请关注作者,且点赞加收藏,记得推荐好友。下载即可游玩,快来下载吧!五星好评可以私信我,免费送资源!快来评论吧!

    【课程设计】实现的金融风控贷款违约预测python源码.zip

    【课程设计】实现的金融风控贷款违约预测python源码.zip

    一个基于STM32F103单片机的无线测距系统.zip

    一个基于STM32F103单片机的无线测距系统.zip

    node-v0.10.9-sunos-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    PiP-Tool.msi

    PiP-Tool

    node-v0.10.10-sunos-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v0.10.30-sunos-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    JAVA网络通信系统的研究与开发(LW+源代码+开题报告).zip

    JAVA网络通信系统的研究与开发(LW+源代码+开题报告)JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).

    Supervised_contrastive_loss_pytorch-main.zip

    Supervised_contrastive_loss_pytorch-main

    node-v4.1.0-darwin-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v0.12.14-darwin-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    nodejs-x64-0.11.4.tgz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    人工智能+深度学习+深度学习数学基础+整理完整版

    【项目资源】:汇聚了云计算、区块链、网络安全、前端设计、后端架构、UI/UX设计、游戏开发、移动应用开发、虚拟现实(VR)、增强现实(AR)、3D建模与渲染、云计算服务、网络安全工具等各类技术项目的素材和模板。包括AWS、Azure、Docker、Kubernetes、React、Vue、Angular、Node.js、Django、Flask、Unity、Unreal Engine、Blender、Sketch、Figma、Wireshark、Nmap等项目的素材和模板。【项目质量】:所有素材和模板都经过精心筛选和整理,确保满足专业标准。在发布前,我们已经对功能进行了全面测试,确保其稳定性和可用性。【适用人群】:适合对技术充满热情的初学者、希望提升专业技能的中级开发者、以及寻求创新解决方案的高级工程师。无论是个人项目、团队合作、课程设计还是商业应用,都能在这里找到合适的资源。【附加价值】:这些项目资源不仅具有很高的学习价值,而且能够直接应用于实际项目中,提高开发效率。对于有志于深入研究或拓展新领域的人来说,它们提供了丰富的灵感和基础框架,帮助你快速构建出令人惊艳的作品。

    node-v0.10.45-linux-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    第八节.py

    第八节.py

    node-v0.10.37-sunos-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    螺旋丸,svg,真的好像!!!

    svg,真的好像!!!

    node-v0.11.4-x86.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    通用nvme模块.rar

    技嘉B85M-DS3H-REV:2.0版本-mmtool刷BIOS-nvme模块

Global site tag (gtag.js) - Google Analytics