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

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. . .