先放上渲染图(gif自己录的，有点丑，不好意思，工具licecap)

实现理念

HTML结构

ul Li div=' BG ' pjs/p/div/Li./ul Li作为鼠标进入和离开的载体。

Div是动画执行的载体。

半铸钢钢性铸铁(Cast Semi-Steel)

Div由绝对定位，其位置由顶部和左侧改变。

由于div的顶部和左侧可能会超过li的大小，因此需要设置li的overflow:hidden

射流研究…

1.使用JS控制CSS3过渡动画

2.如何判断鼠标进出的方向

鼠标坐标知识

MouseEvent对象

下面介绍一些关于MouseEvent中坐标的知识：

(clientX，clientY):以可见区域为参考系的坐标。

(pageX，pageY):将整个页面(包括滚动条铺开的区域)作为参考系统的坐标。

(screenX，screenY):坐标以你的电脑屏幕为参照系。

获取元素内部的坐标

函数pointTo(element，e){ var element box=element . getboundingclientrect()；返回{ x : e . clientx-element box . left，y : e . clienty-element box . top }；}计算元素左上角的坐标

函数startPoint(元素){ var x=0，y=0；while(元素！=null){ x=element . offsetleft；y=element.offsetTopelement=element.offsetParent} return {x: x，y: y}}获取元素的宽度和高度(不要认为宽度和高度新手特别容易出错)

偏右和偏中间简单封装CSS3过渡动画

/* options参数： obj:移动对象速度：移动持续时间(可选)changeStyle:更改的属性，可能不止一个，所以使用function mode(可选)callback:回调函数(可选)*/function animation(选项){if(！options . obj){ return false；}//设置默认持续时间选项. speed=options . speed | | . 5s '；options . obj . style . transition=' all ' options . speed ' ease-in-out '；options . change style . call(options . obj)；var标志=falseoptions . obj . addeventlistener(' transitionend '，function(){//这里，因为每个属性的动画执行完之后，transition end会走一次，所以我们希望它只执行一次。if(！flag){ options . callback options . callback()；} }，false)；}如何确定方向

这里需要用到数学中与切线相关的概念。我自己画了一幅画。不知道你能不能看清楚：(丑。)

获取元素的移动方向

函数getDirection(element，startPoint，pagePoint){ var half width=element . offsetwithts/2，half height=element . offsetheath/2；//获取中心点varcenter={x:startpoint.x半宽，y:startpoint.y半高}//获取距离var disX=page point . x-center . x；var DIsy=PagePoint . y-center . y；If (dissy0Math。ABS(dissy/disxx)=1){//上回报1；} else if (dissy0math。ABS(dissy/disxx)=1){//返回2；} else if(disx0math。ABS(disy/disxx)1){//左返回3；} else {//right return 4；}}启动事件代码，带注释

/*选项中的参数： 触发事件的载体： targetElement执行动画的载体： animationElement */function HeaLTH action(选项){ if(！options.targetElement ||！选项。animation element){ return false；}这个。TargetElement=选项。TargetElement这个。animationelement=options。animationelementthis . TiME id=null this . speed=' 0.3s } HeaLTH ActIon。原型。AddEvent=function(){//保存这的指向var _ this=this_ this。TargetElement。AddEventListener('鼠标输入'，函数(e){ //得到鼠标的坐标var point={ x: e.pageX，y : e . Pagey }控制台。对数(点)；//获得方向var dir=getDirection(_ this。目标元素，startPoint(_this.targetElement)，point)；cleartime out(_ this。timeid)；//取消过渡动画（防止重置动画载体位置时触发过渡效果)_这个。动画元素。风格。过渡=' '；//得到运动的方向，要确定动画载体的开始位置开关(dir){ case 1: _ this。动画元素。风格。top='-100% '；_这个。动画元素。风格。left=' 0打破；案例2: _这个。动画元素。风格。top=' 100% '；_这个。动画元素。风格。left=' 0打破；案例3: _这个。动画元素。风格。top=' 0_这个。动画元素。风格。left='-100% '；打破；案例4: _这。动画元素。风格。top=' 0_这个。动画元素。风格。left=' 100% '；打破；} //异步执行_这个。time id=setTimeout(function(){ animation({ obj : _ this。动画元素，speed: _this.speed，change style : function(){ this。风格。top=' 0这个。风格。left=' 0} });},20);}，false)；_这个。TargetElement。AddEventListener('鼠标离开'，函数(e){ var left，topvar point={ x: e.pageX，y : e . Pagey }清除超时(_ this。timeid)；_这个。动画元素。风格。过渡=' '；var dir=getDirection(_ this。目标元素，startPoint(_this.targetElement)，point)；switch(dir){ case 1: top='-100% '；left=' 0打破；案例2: top=' 100% '；left=' 0打破；案例3:左侧='-100% ';top=' 0打破；案例4:左侧=' 100% ';top=' 0打破；} _这个。timeid=setTimeout(function(){ animation({ obj : _ this。动画元素，speed: _this.speed，change style : function(){ this。风格。top=top这个。风格。左=左；} });},20);}，false)；}总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。