眼球转动
在很多网页中，都存在着跟随运动，比如眼球转动。鼠标在网页中移动时，眼球也会跟着朝相应方向转动
上面是眼球转动的示意图，(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、右眼夹角a2var 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、a2a1 = 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>
链接 ：/article/95790.htm
