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.<p id="p1"></p> <span id="span1">123</span> <button>fadein</button> <button>fadeOut</button>
<style> p { width: 100px; height: 100px; background-color: #1d7db1; opacity:0; } </style>
function fadeIn(ele, speed) { let num = 0; let time = setInterval(() => { num += speed; ele.style.opacity = num / 100; if (num >= 100) { clearInterval(time); // 清楚定时器 } }, 30); } }
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); } }
set: function(elem, num) { elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')'; }
(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)(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; })();
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(); }
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!