元素跟随鼠标移动事件,小动画

前段时间做一个简单的动画,想让人物的眼睛,跟随鼠标的移动而转动,但是在网上找到的案例结果都实现了,但是过程上有一点小错误,今天我就自己理解完了以后自己写了一个;

让元素跟随鼠标的移动主要需要用到的原理就是相似三角形的原理,并指定一个但三角形的斜边作为元素移动的半径;

原理如图:

主要用到的方法: 

onmousemove: 鼠标移入事件

e.clientX   :  鼠标在当前窗口的X轴坐标;

e.clientY  :  鼠标在当前窗口的Y 轴坐标;

atan2(y,x)  :   是表示X-Y平面上所对应的(x,y)坐标的角度，它的值域范围是(-Pi,Pi);

sin() :  一个以弧度表示的角;可通过半径值和角度值获取到点的Y轴上的坐标;

cos() :  一个以弧度表示的角;可通过半径值和角度值获取到点的X轴上的坐标;

代码如下: