您的位置：首页 > Web前端 > CSS

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

2014-07-16 23:18 246 查看

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

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

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中显示当前的位置和信息

为了实现这个功能，又回头查的三角函数，都忘光光了啊，竟然在这里都能用上......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航