JavaScript implements mouse move-in and move-out effects similar to Lagou.com

First the renderings (gif recorded by myself, a bit ugly, sorry, tool licecap)

implementation idea

HTML structure

<ul>
  <li>
    <div class="bg">
      <p>JS</p>
    </div>
  </li>
  .....
</ul>

li is used as the carrier of mouse enter (mouseenter) and mouse move out (mouseleave).

div serves as the carrier for animation execution.

CSS

The div uses absolute positioning and changes its position through top and left.

Since the top and left of the div may exceed the size of the li, it is necessary to set the overflow:hidden of the li;

JS

1. Use JS to control the CSS3 transition animation

2. How to determine when the mouse is moved in and removed Direction

Related knowledge of mouse coordinates

MouseEvent object

Here are some related knowledge of coordinates in MouseEvent:

(clientX, clientY): Coordinates with the visual area as the reference system.

(pageX, pageY): The coordinates of the entire page (including the area rolled out by the scroll bar) as the reference system.

(screenX, screenY): The coordinates using your computer screen as the reference system.

Get the coordinates inside an element

function pointTo(element, e) {
  var elementBox = element.getBoundingClientRect();
  return {
    x: e.clientX - elementBox.left,
    y: e.clientY - elementBox.top
  };
}

Calculate the coordinates of the upper left corner of the element

function startPoint(element){
  var x = 0,y = 0;
  while(element != null) {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  }
  return {
    x: x,
    y: y
  }
}

Get the width and height of the element (don’t think of it as width and height. Novices are particularly prone to making mistakes)

offsetHeight与offsetWidth

Simple encapsulation of CSS3 transition animation

/* options参数: obj: 运动的对象 speed: 运动的持续时间(可选) changeStyle: 改变的属性，这里可能多个，所以采用函数的方式(可选) callback: 回调函数(可选) */
  function animation(options){
    if(!options.obj) {
      return false;
    }
    //设置默认持续时间
    options.speed = options.speed || '.5s';
    options.obj.style.transition = "all " + options.speed + " ease-in-out";
 
    options.changeStyle.call(options.obj);
 
    var flag = false;
    options.obj.addEventListener('transitionend',function(){
      //这里主要由于transitionend在每个属性的动画执行完多会走一遍，所以我们要让它只执行一次。
      if(!flag) {
 
        options.callback && options.callback();
      }
    },false);
  }

How to determine the direction

The concept of tangent in mathematics is used here. I drew a picture myself. I wonder if you can understand it

Get the movement direction of the element

function getDirection(element,startPoint,pagePoint){
  var halfWidth = element.offsetWidth / 2,halfHeight = element.offsetHeight / 2;
  //得到中心点
  var center = {
    x: startPoint.x + halfWidth,
    y: startPoint.y + halfHeight
  }
  //得到鼠标偏离中心点的距离
  var disX = pagePoint.x - center.x;
  var disY = pagePoint.y - center.y;
  if(disY < 0 && Math.abs(disY / disX) >= 1) {
    //上方
    return 1;
  }
  else if(disY > 0 && Math.abs(disY / disX) >= 1) {
    //下
    return 2;
  }
  else if(disX < 0 && Math.abs(disY / disX) < 1) {
    //左
    return 3;
  }
  else {
    //右
    return 4;
  }
}

The code to start the event, with comments

/* options中的参数: 触发事件的载体: targetElement 执行动画的载体: animationElement */
  function HoverAction(options) {
    if(!options.targetElement || !options.animationElement) {
      return false;
    }
    this.targetElement = options.targetElement;
    this.animationElement = options.animationElement;
    this.timeId = null;
    this.speed = "0.3s";
  }
  HoverAction.prototype.addEvent = function() {
    //保存this的指向
    var _this = this;
    _this.targetElement.addEventListener('mouseenter',function(e){
      //得到鼠标的坐标
      var point = {
        x: e.pageX,
        y: e.pageY
      }
      console.log(point);
      //获得方向
      var dir = getDirection(_this.targetElement,startPoint(_this.targetElement),point);
      clearTimeout(_this.timeId);
      //取消过渡动画(防止重置动画载体位置时触发过渡效果)
      _this.animationElement.style.transition = "";
      //得到运动的方向，要确定动画载体的开始位置
      switch(dir){
        case 1:
          _this.animationElement.style.top = "-100%";
          _this.animationElement.style.left = "0";
          break;
        case 2:
          _this.animationElement.style.top = "100%";
          _this.animationElement.style.left = "0";
          break;
        case 3:
          _this.animationElement.style.top = "0";
          _this.animationElement.style.left = "-100%";
          break;
        case 4:
          _this.animationElement.style.top = "0";
          _this.animationElement.style.left = "100%";
          break;
      }
      //异步执行
      _this.timeId = setTimeout(function(){
        animation({
          obj: _this.animationElement,
          speed: _this.speed,
          changeStyle: function(){
            this.style.top = "0";
            this.style.left = "0";
          }
        });
      },20);
    },false);
    _this.targetElement.addEventListener('mouseleave',function(e){
      var left,top;
      var point = {
        x: e.pageX,
        y: e.pageY
      }
      clearTimeout(_this.timeId);
      _this.animationElement.style.transition = "";
      var dir = getDirection(_this.targetElement,startPoint(_this.targetElement),point);
      switch(dir) {
        case 1:
          top = '-100%';
          left = '0';
          break;
        case 2:
          top = '100%';
          left = "0";
          break;
        case 3:
          left = "-100%";
          top = "0";
          break;
        case 4:
          left = "100%";
          top = "0";
          break;
      }
      _this.timeId = setTimeout(function(){
        animation({
          obj: _this.animationElement,
          speed: _this.speed,
          changeStyle: function(){
            this.style.top = top;
            this.style.left = left;
          }
        });
      },20);
    },false);
 
  }