google眼睛的实现

老Man

浏览: 238101 次
性别:
来自: 常州

最近访客更多访客>>

goahead2010

zlc521lj

qj624904774

一夕剑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

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>