JavaScript implements a pull-hook-like mouse-move-out effect _javascript technique

First on the effect chart (GIF itself recorded, a little ugly sorry, tool licecap)

Realize the idea

HTML structure

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

The li is used as the mouse to move ( mouseenter ) and mouse out ( mouseleave ) the carrier.

Div as the carrier of animation execution.

Css

Div uses absolute positioning to change its position through top and left.

Because the top and left of the div may exceed the size of Li, you set theoverflow:hidden;

Js

1, the use of JS control CSS3 Transition Animation

2, how to determine the direction of mouse movement in the removal

Related knowledge of mouse coordinates

MouseEvent objects

Here are some of the MouseEvent relevant knowledge about the coordinates:

(clientX, clientY): coordinates that take the viewable area as the reference system.

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

(screenX, screenY):take the coordinates of your computer screen as the reference system.

Gets the coordinates inside an element

  function Pointto (element, e) {
    var elementbox = Element.getboundingclientrect ();
    return {
      x:e.clientx-elementbox.left,
      y:e.clienty-elementbox.top
    };
  }

Calculates the coordinates of the upper-left corner of an 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
    }
  }

Gets the width and height of the element (do not assume that the width and height novice are particularly prone to making mistakes)

  Offsetheight and Offsetwidth

Simple encapsulation of CSS3 transition animation

/* Options parameter: obj: Moving object Speed: Duration of motion (optional) Changestyle: Changing attributes, there may be multiple, so take the form of a function (optional) Callback: callback function (optional).
  Imation (options) {
    if (!options.obj) {return
      false;
    }
    Set Default duration
    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 () {
      //) Here is mainly due to the transitionend in each attribute of the animation is done more than will go through, So we're going to make it run only once.
      if (!flag) {

        options.callback && options.callback ();
      }
    },false);
  }

How to determine the direction

Here to use the concept of tangent in mathematics, I have drawn a picture, I do not know whether you can see the special Understanding: (Strange ugly ... )

Get the movement direction of the element

  function Getdirection (element,startpoint,pagepoint) {
    var halfwidth = Element.offsetwidth/2,halfheight = ELEMENT.OFFSETHEIGHT/2;
    Get Center point
    var center = {
      x:startpoint.x + halfwidth,
      Y:startpoint.y + halfheight
    }
    //Get the distance of the mouse from the center point C8/>var disx = pagepoint.x-center.x;
    var disy = pagepoint.y-center.y;
    if (Disy < 0 && Math.Abs (DISY/DISX) >= 1) {
      //top return
      1;
    }
    else if (Disy > 0 && math.abs (DISY/DISX) >= 1) {
      //down return
      2;
    }
    else if (Disx < 0 && Math.Abs (DISY/DISX) < 1) {
      //left return
      3;
    }
    else {
      //Right return
      4;
    }
  }

Code to start the event, with comments

/* The parameters in the options: The carrier that triggers the event: Targetelement execution Animation carrier: animationelement/function Hoveraction (options) {if!options.tar getelement | |
    !options.animationelement) {return false;
    } this.targetelement = Options.targetelement;
    This.animationelement = options.animationelement;
    This.timeid = null;
  This.speed = "0.3s";
    } HoverAction.prototype.addEvent = function () {//Save this pointer to var _this = this;
        _this.targetelement.addeventlistener (' MouseEnter ', function (e) {//Get the mouse coordinates var point = {X:e.pagex,
      Y:e.pagey} console.log (point);
      Get direction var dir = getdirection (_this.targetelement,startpoint (_this.targetelement), point);
      Cleartimeout (_this.timeid);
      Cancels the transition animation (prevents the transition effect when resetting the animation carrier position) _this.animationelement.style.transition = "";
          To get the direction of motion, to determine the starting position of the animation carrier 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
          }//Asynchronous Execution _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); }

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can help, if there is doubt you can message exchange.