JavaScript kapselt eine Funktion mit Ein- und Ausblendeffekten

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.

• 
  

Schauen wir uns zunächst die Code-Implementierung an!

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>

Nehmen wir zunächst eine Schauen Sie, wie Sie die erste Version der FadeIn-Funktion schreiben: Verstehen Sie zunächst die Implementierungsidee

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 realisiert wird, sind einige 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 kompatibel zu sein GG

Das Funktionsattribut zum Festlegen der Transparenz von DOM-Knoten in js: filter= "alpha(opacity=" + value+ ")" (kompatibel mit IE)

Der Filterbereich von IE 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 der Float-Wert-Änderung, mit der wir den Deckkraftwert von 1 auf 0 setzen (denken Sie an die Kompatibilität)

wird ausgeblendet. Logik: Der Wert der Deckkraft ändert sich als Gleitkommawert von 1 auf 0.

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

Verwandte Empfehlungen:

JQuery implementiert das Beispiel für den Ein- und Ausblend-Prompt-Funktionseffekt von IE6

Beispiel für die zu implementierende Anzeige in CSS der Ein- und Ausblend-Übergangseffekt

h5+css3-Codebeispiel zur Implementierung des Bild-Fly-In- und Ausblendeffekts

Das obige ist der detaillierte Inhalt vonJavaScript kapselt eine Funktion mit Ein- und Ausblendeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!