Native js implémente les compétences fadein et fadeout effect

Native js implémente les compétences fadein et fadeout effect_javascript

WBOY

Libérer： 2016-05-16 16:46:06

original

1986 Les gens l'ont consulté

Attributs de fonction pour définir la transparence des nœuds DOM dans js : filter= "alpha(opacity=" value ")" (compatible avec IE) et opacity=value/100 (compatible avec FF et GG).

Regardons d'abord le code de compatibilité pour définir la transparence :

Copiez le code Le code est le suivant :

 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///Compatible avec FF, GG et nouvelle version IE 
 ele.style.opacity = opacity / 100; 

} else { 
///Compatible avec les anciennes versions, c'est-à-dire 
ele.style.filter = "alpha(opacity=" opacity ")"; 
} 
} 

Certains amis écrivent comme ceci :

Copiez le code Le code est le suivant :

 
function setOpacity(ele, opacity) { 
if (document.all) { 
///Compatible avec ie 
ele.style.filter = "alpha(opacity=" opacity " )"; 
} 
ele { 
///Compatible avec FF et GG 
ele.style.opacity = opacity / 100 
} } 

 

Je tiens à dire qu'il y a un problème lors de l'exécution sous IE10. Il n'y a pas de réponse après avoir cliqué. Étant donné qu'IE10 prend en charge l'attribut d'opacité mais pas le filtre, cette méthode n'est pas recommandée.

Code de la fonction fondu :

Copier le code Le code est le suivant :

function fadein (ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = vitesse / 1000; 
var moy = count < / count) : (opacité / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacité) { 
v = avg; 
setOpacity (ele, v); 
} else { 
clearInterval(timer); 
} 
}, 
} 
} 

 

Fadeout Code de fonction :

Copier le code Le code est le suivant :

function fadeout( ele, opacité, vitesse) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") | | ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = vitesse / 1000; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

 
Ce qui suit est un exemple de démonstration : 

Copier le code Le code est le suivant :

< /body>

Si vous avez une meilleure implémentation, veuillez laisser un message. . .