图片跟随鼠标移动

目标：
鼠标介入div时显示图片
移动过渡时有显示痕迹

过程

1. css
2. Js

Css
过渡动画用js实施过杂
实现移动痕迹
判断用户输入时鼠标移动
分为4种情况
上，下，左,右
先写顶部


使用transform-origin：top 当前顶部
它 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
left，right，top，bottom或center中之一，定义相对应的变形中心偏移。
关键字控制偏移点
鼠标移入时原点可能不在中点
将鼠标移至中点判断
旋转当前元素原点所在位置
旋转当前元素所在3d位置
将四个方位都写上
为了兼容其他页面写四个方位

Js
数标键入时让痕迹显示出来
写过渡动画

perspective-origin’: ‘50% 0%’, x轴 y轴
‘-webkit-perspective-origin’: ‘50% 0%’

监听鼠标移动事件
这里用bind可至多四个

mouseenter mouseleave 移入 移出

定义变量赋予等值为元素状态
var dir = getDirection($(this), e),//控制当前进入（穿过）元素时元素 和鼠标进入（穿过）元素时状态
enter = e.type === ‘mouseenter’,//type返回当前 Event 对象表示的事件的名称。

当用户移动时根据位置赋予js过渡动画
$target = $(this).find’.example’);//定义变量等于进入（穿过）元素时时所在的div

用switch语句判断传入变量状态

case 0://从上至下
case 1://从右至左
case 2://从下至上
case 3://从左至右
四种对应四种移动方式
注意兼容！！！

$(this).css(rightPerspectiveOrigin);//给与对应的过渡动画
$target.css({
‘animation’: ‘rightenter 400ms forwards’, //鼠标键入后停留
‘-webkit-animation’: ‘rightenter 400ms forwards’
});

核心方法写完后
判断键入元素方法

元素，和鼠标状态

获取当前元素的宽高用于计算

计算出y轴具体位置

有了具体数值接下来就是如何
求出当前鼠标的位置这里用到是Math.atan2()方法,可以返回原点到x,y的线段的角度

这个角度180度判断不符合360度的判断加上180度除于Math.PI
现在求出了一个角度的弧度 / 90°
每个除于90°后 四舍五入 可以让45°为分界线
把结果加上3
左边加3之后就是3和7，然后取余后为3
上边加3之后为4，取余后为0
右边加3为5，取余为1
下边加3为6，取余为2
再除于4给每个位置的数值一个事件
值就可传回switch判断位置了

效果完成