JavaScript kapselt nativ einen Funktionstest-Beispielcode für Ein- und Ausblendeffekte

In diesem Artikel wird hauptsächlich die Funktion der nativen Javascript-Kapselung eines Ein- und Ausblendeffekts vorgestellt. Er umfasst hauptsächlich die FadeIn-Einblendfunktion und die FadeOut-Ausblendfunktion 🎜>

Apropos Verlaufsanzeige und Verschwinden von js: Die meisten Freunde werden 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>

Schauen wir uns zunächst an, wie die erste Version der FadeIn-Funktion geschrieben wird: 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 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();
 }

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Fünf gängige JavaScript-Funktionen

Angular Study Notes Beispiele für die Integration von UI-Frameworks und -Steuerelementen von Drittanbietern

Node.js-Beispiel für die Implementierung der Registrierungs-E-Mail-Aktivierungsfunktion

Das obige ist der detaillierte Inhalt vonJavaScript kapselt nativ einen Funktionstest-Beispielcode für Ein- und Ausblendeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!