js+css3实现一双转动的眼睛-------Day68

浏览数：31 / 时间：2015年06月09日

在最开始思考这个小应用的时候，我想当然的认为，这可以跟钟表一样，只要获取转动的角度就好了，当然实际上我也是如此实现的，但是中间还是有些地方是我所没有想到的，然后我就又学到了好多东西...

先来考虑下，如果想要实现一双可以跟随鼠标转动的眼睛，我们需要做到哪些？

1、用样式描绘一双眼睛，额，其实图片也可以；

2、获取鼠标所在位置；

3、根据鼠标所在位置，确定眼睛所在的div偏转的角度；

想起来确实很容易，只要实现以上三点我就可以得到想要的目的了，前两个在前面都有所涉及，而第三点则就成了本次的一大亮点。这样，先一步步来记录，首先，用css来描绘一双眼睛，来看下我实现的简单效果：

虽然有些粗糙，但是还不错啦，嘿嘿，来看看代码的编写。

html部分：

 <body>
	<div id="tip"></div>
	<div id="back">
		<div id="leftEye">
			<div id="leftZhu">
				<div id="leftTong"></div>
			</div>
		</div>
		<div id="rightEye">
			<div id="rightZhu">
				<div id="rightTong"></div>
			</div>
		</div>
	</div>
 </body>

CSS部分：

 <style type="text/css">
  #back{position:absolute;width:400px;height:400px;left:50%;top:40%;margin-left:-200px;background:cyan;}
  #leftEye{width:100px;height:100px;margin-left:60px;margin-top:50px;background:#fff;border-radius:100px;border:10px solid #000;float:left;}
  #rightEye{width:100px;height:100px;margin-left:60px;margin-top:50px;background:#fff;border-radius:100px;border:10px solid #000;float:left;}
  #leftZhu{width:50px;height:50px;margin-left:20px;margin-top:40px;background:#000;border-radius:50px;}
  #rightZhu{width:50px;height:50px;margin-left:30px;margin-top:30px;background:#000;border-radius:50px;}
  #leftTong{clear:both;width:20px;height:20px;margin-top:10px;margin-left:5px;background:#fff;border-radius:20px; }
  #rightTong{clear:both;width:20px;height:20px;margin-top:10px;margin-left:5px;background:#fff;border-radius:20px;}
  #tip{width:100%;height:200px;}
  </style>

这样一层套一层的就完成了眼睛的实现，然后就是获取鼠标所在位置，这个功能在前面实现拖拽div的时候曾经用到过：事件是监听鼠标onmouseover，鼠标的位置则是event.clientX和event.clientY，这样就可以实现第二个要求了，而至于第三个要求，求旋转的角度。

我们假定以页面的中心为初始点（原点），则我们可以得到鼠标所在的点相比较此点的角度，原点我们设为（screen.availWidth/2，screen.availHeight/2），而我们可以得到的两点之间的倾斜角度，则可以通过Math.atan2()函数进行求取

  <script type="text/javascript">
  window.onload=function(){
	var eye=document.getElementById("leftZhu");
	var eye2=document.getElementById("rightZhu");
	var tip=document.getElementById("tip");
	
	document.onmouseover=function(event){
		var angle;
		var event=event||window.event;
		var disX=event.clientX;
		var disY=event.clientY;
		var pointX=disX-screen.availWidth/2;
		var pointY=disX-screen.availHeight/2;
		var aCir=Math.atan2(pointX,pointY);
		var pi=Math.PI;
		//弧度变成角度
		pointX>0?angle=90-aCir/pi*180:angle=270-aCir/pi*180;
		tip.innerHTML="现在鼠标位置("+disX+","+disY+")"+",现在偏转弧度为："+aCir+",现代偏转角度为"+angle;
		eye.style.transform="rotate("+angle+"deg)";
		eye2.style.transform="rotate("+angle+"deg)";
	}
  }
  </script>

注意此处不能用Math.atan()，Math.atan()方法括号内是放的一个弧度值，因为tan函数有可能值非常大，另一方面，由于tan函数的周期性，用此函数返回的信息为多个，用此方法则不方便，另外还有90和270度时都无意义，则我们通常都是用Math.atan2()，这样我们就得到需求的角度了。同时tip的div中显示当前的位置和信息