Cet article présente principalement la fonction d'encapsulation native javascript d'un effet de fondu d'entrée et de sortie. Il comprend principalement la fonction de fondu d'entrée FadeIn et la fonction de fondu de sortie FadeOut. Les amis dans le besoin peuvent se référer à ce qui suit <.>
En parlant de l'affichage du dégradé et de la disparition de js, la plupart des amis penseront à fadeIn(), fadeOut() ou fadeToggle() dans JQuery. Mais que se passerait-il si l’immense bibliothèque JQuery était appelée uniquement pour introduire un tel effet ? En d'autres termes, je me suis amélioré en utilisant du js natif pour implémenter certaines fonctions~Ainsi, j'ai brièvement étudié l'effet de l'écriture de fondus d'entrée et de sortie dans du code js pur. S'il y a une erreur, merci de me la signaler dans les commentaires afin que je puisse corriger mes propres erreurs
(1 ) FadeIn L'effet de fondu de la fonction
est en fait un setInterval(), couplé à des opérations DOM cycliques, cet effet peut être obtenu en modifiant la transparence du nœud objet de l'élément. Nous extrayons donc deux choses nécessaires : setInterval(), l'opacité et la vitesse.<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) Fonction FadeOut
vitesse : Il s'agit de la vitesse de changement de la valeur flottante à laquelle nous définissons la valeur d'opacité de 1 à 0 (n'oubliez pas de prendre en compte la compatibilité)(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(); }
Introduction à l'implémentation de $.fn et des effets de défilement d'image dans jquery
Implémentation jQuery de glisser-déposer L'effet mur de souhaits
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!