google眼睛的实现

最新推荐文章于 2022-07-22 23:14:45 发布

VBCLaplace

最新推荐文章于 2022-07-22 23:14:45 发布

阅读量194

点赞数

分类专栏： Google眼睛

本文链接：https://blog.csdn.net/VBCLaplace/article/details/11917901

版权

Google眼睛专栏收录该内容

1 篇文章 0 订阅

订阅专栏

没事写的.

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" οnmοusemοve="moveEye(event)"  οnlοad="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>

查看图片附件

VBCLaplace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google眼睛的实现

没事写的.js实现眼睛随鼠标运动.就是眼睛一直盯着鼠标看.图片:pupil: eye-r: eye-y: 就是三图片. 我写的时候用的是gif格式的.但是传到巴巴变相册之后好像变成了jpg.但问题不大. 效果图:代码： JavaScript眼睛body{height:1000px;}
复制链接

扫一扫

专栏目录