JavaScript implements mouse move-in and move-out effects similar to Lagou.com-JS Tutorial-php.cn

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

高洛峰

Release： 2016-12-08 15:28:48

Original

1641 people have browsed it

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

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

implementation idea

HTML structure

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

Copy after login

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;

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
  };
}

Copy after login

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
  }
}

Copy after login

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

Copy after login

Simple encapsulation of CSS3 transition animation

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

Copy after login

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

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

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;
  }
}

Copy after login

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(&#39;mouseenter&#39;,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(&#39;mouseleave&#39;,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 = &#39;-100%&#39;;
          left = &#39;0&#39;;
          break;
        case 2:
          top = &#39;100%&#39;;
          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);
 
  }

Copy after login