眼球转动
在很多网页中,都存在着跟随运动,比如眼球转动。鼠标在网页中移动时,眼球也会跟着朝相应方向转动
上面是眼球转动的示意图,(x0,y0)是眼球的位置,而(x,y)是鼠标的位置。设直线与垂直方向的夹角为a,假设圆心点坐标为(0,0),可以得到以下公式
tan(a) = x/y = x0/y0
x0 = r*sin(a)
y0 = r*cos(a)
在mousemove事件中,可以很容易的得到鼠标位置(x,y),由此求出夹角a,进而可以求出眼球的位置
设左眼为ball1,右眼为ball2。左眼的圆心坐标是(39,72),右眼的圆心坐标是(106,68),眼球可以移动的半径是12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{position: absolute;top: 100px;left: 200px;}
#ball1{position: absolute;top: 62px;left: 28px;}
#ball2{position: absolute;top: 58px;left: 96px;}
</style>
</head>
<body>
<div id="test">
<img src="head.png" alt="body">
<img id="ball1" src="ball.png" alt="ball">
<img id="ball2" src="ball.png" alt="ball">
</div>
<script>
//声明脑袋的默认偏移
var offsetLeft = test.offsetLeft;
var offsetTop = test.offsetTop;
//声明左眼夹角a1、右眼夹角a2
var a1,a2;
//声明左眼圆心(X1,Y1)、右眼圆心(X2,Y2)
var X1 = 38,Y1 = 72,X2 = 106,Y2 = 68;
//声明半径
var R = 12;
document.onmousemove = function(e){
e = e || event;
//获取鼠标坐标
var x = e.clientX;
var y = e.clientY;
//更新夹角a1、a2
a1 = Math.atan2(x-X1-offsetLeft,y-Y1-offsetTop);
a2 = Math.atan2(x-X2-offsetLeft,y-Y2-offsetTop);
//更新左眼、右眼的left、top值
ball1.style.left = R*Math.sin(a1) + X1 -10 + 'px';
ball1.style.top = R*Math.cos(a1) + Y1 -10+ 'px';
ball2.style.left = R*Math.sin(a2) + X2 -10 + 'px';
ball2.style.top = R*Math.cos(a2) + Y2 -10 + 'px';
}
</script>
</body>
</html>
链接 :
http://www.jb51.net/article/95790.htm