Implementazione di un effetto di passaggio del mouse simile a Lagou.net con JavaScript

Ecco la schermata iniziale (il gif è stato registrato da solo, è un po' brutto, mi scuso, strumento licecap)

　

Pianificazione dell'implementazione

　Struttura HTML

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

　　　 Il li agisce come portatore dell'entrata del mouse (mouseenter) e dell'uscita del mouse (mouseleave).

　　　 Il div agisce come portatore dell'animazione.

CSS

　　　 Il div utilizza la posizionamento assoluto, cambiando la sua posizione tramite top e left.

　　　 Poiché il top e left del div potrebbero superare la dimensione del li, è necessario impostare li con overflow: hidden;

JavaScript

　　　 1、Utilizzare JavaScript per manipolare l'animazione CSS3 transition

　　　 2、Come determinare la direzione di entrata e uscita del mouse

Conoscenze sulle coordinate del mouse

Oggetto MouseEvent

Di seguito si introducono alcune conoscenze relative alle coordinate del mouse in MouseEvent:

　　　 (clientX, clientY): Coordinate di riferimento dell'area visibile.

　　　 (pageX, pageY): Coordinate di riferimento dell'intera pagina (inclusi gli areali scollati delle barre di scorrimento).

　　　 (screenX, screenY): Coordinate di riferimento dello schermo del computer.

　　　 Ottieni le coordinate all'interno di un elemento

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

　　　 Calcola le coordinate dell'angolo superiore sinistro dell'elemento

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

　　　 Ottieni la larghezza e l'altezza dell'elemento (non pensare a width e height, i principianti spesso commettono errori)

  offsetHeight e offsetWidth

Semplice pacchetto di CSS3 transition animazione

/* Parametro options: obj: oggetto in movimento speed: durata del movimento (opzionale) changeStyle: attributi da modificare, qui possono esserci molti, quindi si utilizza un metodo di funzione (opzionale) callback: funzione di callback (opzionale) */
  function animation(options){
    if(!options.obj) {
      return false;
    }
    //Imposta la durata predefinita
    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(){
      //Qui principalmente a causa di transitionend che viene eseguito più volte alla fine dell'animazione di ogni attributo, quindi dobbiamo far sì che venga eseguito una sola volta.
      if(!flag) {
        options.callback && options.callback();
      }
    },false);
  }

Come determinare la direzione

Qui si utilizzano concetti matematici relativi al tangente, ho disegnato una figura, non so se riuscite a vedere chiaramente: (bellamente brutto...)

　

Ottieni la direzione del movimento dell'elemento

  function getDirection(element,startPoint,pagePoint){
    var halfWidth = element.offsetWidth / 2, halfHeight = element.offsetHeight / 2;
    //Calcola il punto centrale
    var center = {
      x: startPoint.x + halfWidth,
      y: startPoint.y + halfHeight
    }
    //Calcola la distanza del mouse dal centro del punto
    var disX = pagePoint.x - center.x;
    var disY = pagePoint.y - center.y;
    if(disY < 0 && Math.abs(disY / disX) >= 1) {
      //Alto
      return 1;
    }
    else if(disY > 0 && Math.abs(disY / disX) >= 1) {
      // sotto
      return 2;
    }
    else if(disX < 0 && Math.abs(disY / disX) < 1) {
      // sinistra
      return 3;
    }
    else {
      // destra
      return 4;
    }
  }

codice per avviare l'evento, con commenti

/* i parametri di options: il veicolo che scatena l'evento: targetElement il veicolo che esegue l'animazione: 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() {
    // memorizza l'indirizzo di this
    var _this = this;
    _this.targetElement.addEventListener('mouseenter',function(e){
      // ottieni le coordinate del mouse
      var point = {
        x: e.pageX,
        y: e.pageY
      }
      console.log(point);
      // ottieni la direzione
      var dir = getDirection(_this.targetElement,startPoint(_this.targetElement),point);
      clearTimeout(_this.timeId);
      // annulla l'animazione di transizione (per prevenire che l'effetto di transizione venga attivato quando la posizione dell'animatore viene ripristinata)
      _this.animationElement.style.transition = "";
      // ottieni la direzione del movimento, per determinare la posizione iniziale dell'animatore
      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;
      }
      //Esecuzione asincrona
      _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);
  }

Sommario

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa aiutare la tua apprendimento o lavoro, se hai domande puoi lasciare un messaggio di discussione.