JS kapselt die Ein- und Ausblendfunktion

Dieses Mal stelle ich Ihnen die gekapselte Ein- und Ausblendfunktion von JS vor. Was sind die Vorsichtsmaßnahmen für die gekapselte Ein- und Ausblendfunktion von JS? Das Folgende ist ein praktischer Fall.

Wenn es um die Verlaufsanzeige und das Verschwinden von js geht, werden die meisten Freunde an fadeIn(), fadeOut() oder fadeToggle() in JQuery denken. Was aber, wenn die riesige JQuery-Bibliothek nur aufgerufen wird, um einen solchen Effekt einzuführen? Mit anderen Worten, ich habe mich verbessert, indem ich natives JS verwendet habe, um einige Funktionen zu implementieren ~

Also habe ich kurz die Auswirkung des Schreibens von Ein- und Ausblendungen in reinem JS-Code untersucht.

Wenn ein Fehler vorliegt, weisen Sie ihn bitte in den Kommentaren darauf hin, damit ich meine eigenen Fehler korrigieren kann

(1 ) FadeIn Der Fade-Effekt der Funktion

ist eigentlich ein setInterval(), gekoppelt mit zyklischen DOM-Operationen, dieser Effekt kann durch Ändern der Transparenz des Elementobjektknotens erreicht werden.

Also extrahieren wir zwei notwendige Dinge: setInterval(), Opazität und Geschwindigkeit.

• Geschwindigkeit: Dies ist die Änderungsgeschwindigkeit des Gleitkommawerts, wenn wir den Deckkraftwert von 0 auf 1 setzen.

• Die Logik des Einblendens: Der Deckkraftwert ändert sich vom Float-Wert von 0 auf 1.

html:

<p id="p1"></p>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

CSS-Stil

<style>
 p {
  width: 100px;
  height: 100px;
  background-color: #1d7db1;
  opacity:0;
 }
 </style>

Schauen wir uns zunächst an, wie die erste Version der FadeIn-Funktion geschrieben wird: Verstehen Sie zunächst die Idee der Umsetzung

function fadeIn(ele, speed) {
  let num = 0;
  let time = setInterval(() => {
    num += speed;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time); // 清楚定时器
    }
  }, 30);
  }
}

Wenn dieser Effekt vorübergehend erreicht wird, sind manche Dinge nicht so einfach. Wenn mehrere Triggereffekte auftreten, wird setInterval mehrmals gleichzeitig verwendet, was zu einigen problematischen Fehlern führt.

Um dieses Problem zu lösen, gibt es derzeit eine Lösung: Fügen Sie einen globalen Status hinzu, um zu verhindern, dass setInterval mehrmals ausgelöst wird.

let Fadeflag = true;
function fadeIn(ele, speed) {
  let num = 0;
  if (Fadeflag) {
  let time = setInterval(() => {
    num += speed;
    Fadeflag = false;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time);
     Fadeflag = true;
    }
  }, 30);
  }
}

Kompatibilitätsproblem! ! !

Schauen Sie sich zuerst den Code an

set: function(elem, num) {
  elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')';
}

Hinweis: Der Code legt num/100 fest, da wir ie als Standard verwenden, um mit ff und GG kompatibel zu sein

Das Funktionsattribut von Einstellen der DOM-Knotentransparenz in js :filter= "alpha(opacity=" + value+ ")" (kompatibel mit ie)

ie's Filterbereich ist 0~100

opacity=value/100 ( kompatibel mit FF und GG).

Die Deckkraft von FF und GG beträgt 0~1 (um mit dem Filterbereich von z. B. kompatibel zu sein, verwenden wir num/100)

(2) FadeOut-Funktion

Geschwindigkeit: Dies ist die Geschwindigkeit, mit der sich der Float-Wert ändert, wenn wir den Deckkraftwert von 1 auf 0 setzen (denken Sie an die Kompatibilität)

Ausblenden Logik: Der Deckkraftwert ändert sich von 1 auf 0. Der Float-Wert ändert sich.

Verpackungsfunktion

(function() {
  let fadeFlag = true;
  function Fade(selector) {
    this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')':  elem.style.opacity = opacity / 100;
      return true;
   },
   setOpacity: function(num) {
      this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
   },
    fadeIn: function(speed, opacity){
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
      */
      speed = speed || 2;
      opacity = opacity || 100;
      let num = 0; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num += speed;
          fadeFlag = false;
          this.setOpacity(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num >= opacity) {
            clearInterval(time);
            fadeFlag = true;
          }
        }, 20);
      }
    },
    fadeOut: function(speed, opacity) {
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
   */
      speed = speed || 2;
      opacity = opacity || 0;
      let num = 100; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num -= speed;
          fadeFlag = false;
          this.set(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num <= opacity) {
          clearInterval(time);
          fadeFlag = true;
          }
        }, 20);
      }
    }
  };
window.Fade = Fade;
})();

Testbeispiel:

let btn = document.getElementsByTagName('button')[0];
 let btn2 = document.getElementsByTagName('button')[1];
 btn.onclick = () => {
  let fade = new Fade('p1');
 fade.fadeIn();
 };
 btn2.onclick = () => {
  let fade = new Fade('p1');
  fade.fadeOut();
 }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue+storejs-Verarbeitung zum Abrufen von Daten

So handhaben Sie die Übergabe dynamischer Abfrageparameter in vue- Router

Das obige ist der detaillierte Inhalt vonJS kapselt die Ein- und Ausblendfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!