e要传递到getDirection函数中；
在定义的mouseenter事件中，this代表当前dom元素oDemo，这个也要传到getDirection函数中去，才能拿到这个oDemo的宽高
效果：从上方进去是0，右边进是1，下边进是2，左边进是3，且左边的上下区域都是3
鼠标进入的方向判断已解决，也可以用这个方法判断鼠标移出的方向
oDemo.onmouseleave = function(e){
var din = getDirection(e, this);
console.log(din);
}
效果：从上边移出，输出0；右边移出，输出1；下边移出，输出2；左边移出，输出3
以上讨论的是正方形，对角线切开各是45°，如果我的框框是长方形，对角线切开角度就未必是45了
可以将长方形长的那一边压缩，变成正方形（虽然被压缩，但不影响出入点在上下左右哪条边上）
将getDirection函数改为：
function getDirection(e, ele){
var w = ele.offsetWidth;
var h = ele.offsetHeight;
var x = (e.offsetX - w/2) * ( w > h ? h/w : 1);
var y = (e.offsetY - h/2) * (h > w ? w/h : 1);
var d = (Math.round( (Math.atan2(y, x) * (180/Math.PI) + 180)/90 ) + 3) % 4;
return d;
}
效果：将框框改成宽200px，高400px，打印鼠标离开的情况：
问题2：当鼠标移进框框时，希望识别进框的方向，并且让描述从这个方向开始进入，直至完全显示描述；当鼠标移出框框时，识别移出的方向，描述文字跟着这个方向消失
先做前半部分：
1.给四个方向定义一开始描述的位置，从左进时，框在左边外；从右进时，框在右边外，用css辅助：
li .cover .in-top,
li .cover .out-top {
transform: translateY(-100%);
}
li .cover .in-right,
li .cover .out-right {
transform: translateX(100%);
}
li .cover .in-bottom,
li .cover .out-bottom {
transform: translateY(100%);
}
li .cover .in-left,
li .cover .out-left {
transform: translateX(-100%);
}
2.用js把步骤1绑定到mouseenter上：
var oLi = document.getElementsByTagName('li');
var len = oLi.length;
for (var i = 0; i < len; i++) {
oLi[i].onmouseenter = function (e) {
var dir = getDirection(e, this);
var oDes = this.getElementsByClassName('des')[0];
oDes.className = 'des';/* 初始化className，要不然一直加Name没有清除*/
switch (dir){
case 0 :
oDes.classList.add('in-top');
break;
case 1 :
oDes.classList.add('in-right');
break;
case 2 :
oDes.classList.add('in-bottom');
break;
case 3 :
oDes.classList.add('in-left');
}
}
3.给鼠标进入加动画
li .cover .in-top,
li .cover .in-right,
li .cover .in-bottom,
li .cover .in-left {
animation: mytest 0.3s linear forwards;
}
@keyframes mytest {
100% {
transform: translate(0,0);
}
}
把上个案例的transition注释掉，要不然鼠标进入框框时，由于des（描述文字）的状态改变，会有过渡效果，留下默认状态，des一开始在框下面隐藏着：
transform: translateY(100%);
/* transition: transform 0.3s; */
效果：当鼠标从左往右进入框时，描述文字在框左边，然后从左往右运动，最后停留在最后一帧，即完整显示描述文字，其他方向、其他图片同理
然后做效果的后半部分，鼠标移出：
由于一开始定义鼠标从四方向进入前的位置时，也定义了鼠标从四方向出去后的位置，这个移出后的默认状态可以当作是移出动画的最后一帧，就不用写100%了，定义一下0%即可
移出前，位置应该在translate(0, 0)，即移入的最后一帧
li .cover .out-top,
li .cover .out-right,
li .cover .out-bottom,
li .cover .out-left {
animation: mytestout 0.3s linear;
}
@keyframes mytestout {
0% {
transform: translate(0,0);
}
}
然后再用js动态加上类名，当从左边移出，类名加上out-left；从右边移出，类名加上out-right等即可
从上移出时，最后消失了，是因为在cover上设置了overflow: hidden;
此处钻一会牛角尖：
专业技能
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
-
HTML+CSS
-
JavaScript
-
前端框架
-
前端性能优化
-
前端监控
-
模块化+项目构建
-
代码管理
-
信息安全
-
网络协议
-
浏览器
-
算法与数据结构
-
团队管理
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限，仅展示部分内容
