Test der nativen JavaScript-Kapselungsfunktion 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

Deckkraft=Wert/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)

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

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird Aufmerksamkeit auf weitere verwandte Inhalte der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die Implementierung von $.fn und Bildlaufeffekten in jquery

jQuery-Implementierung von Drag-and-Drop Der Wunschwandeffekt

Das obige ist der detaillierte Inhalt vonTest der nativen JavaScript-Kapselungsfunktion für Ein- und Ausblendeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!