Propriétés de fonction pour régler la transparence des nœuds DOM dans js: filter = "alpha (opacity =" + value + ")" (compatible avec IE) et Opacity = valeur / 100 (compatible avec FF et GG).
Examinons d'abord le code de compatibilité pour définir la transparence:
La copie de code est la suivante:
fonction setoPacity (ele, opacité) {
if (ele.style.opacity! = Undefined) {
/// compatible avec FF et GG et les nouvelles versions de IE
ele.style.opacity = opacity / 100;
} autre {
/// compatible avec l'ancienne version IE
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
}
En ce qui concerne certains amis, j'ai écrit ceci:
La copie de code est la suivante:
fonction setoPacity (ele, opacité) {
if (document.all) {
/// compatible IE
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
ele {
/// compatible avec FF et GG
ele.style.opacity = opacity / 100;
}
}
Je veux dire qu'il y a un problème avec l'exécution sous IE10, mais il n'a pas répondu après avoir cliqué. Parce que IE10 prend en charge l'attribut Opacity mais pas le filtre, cette méthode n'est pas recommandée.
Code de fonction Fadein:
La copie de code est la suivante:
fonction fadein (ele, opacité, vitesse) {
if (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", "") .replace (")", "") || ele.style.opacity;
v <1 && (v = v * 100);
Var Count = Speed / 1000;
var avg = compter <2? (Opacité / Count): (Opacité / Count - 1);
var timer = null;
timer = setInterval (function () {
if (v <opacité) {
v + = avg;
setOpacity (ele, v);
} autre {
ClearInterval (temporisateur);
}
}, 500);
}
}
Code de fonction Fadeout:
La copie de code est la suivante:
fonction 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 = Speed / 1000;
var avg = (100 - opacité) / count;
var timer = null;
timer = setInterval (function () {
if (v - avg> opacité) {
v - = avg;
setOpacity (ele, v);
} autre {
ClearInterval (temporisateur);
}
}, 500);
}
}
Voici un exemple de démonstration:
La copie de code est la suivante:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
<script type = "text / javascript" src = "fade.js"> </ script>
<script type = "text / javascript">
window.onload = function () {
document.getElementById ('Button1'). OnClick = function () {
fadeout (document.getElementById ('dv'), 0, 6000);
}
document.getElementById ('Button2'). onClick = function () {
fadein (document.getElementByid ('dv'), 80, 6000);
}
}
</cript>
</ head>
<body>
<div id = "dv" style = "background-color: vert; largeur: 400px; hauteur: 400px;"> </div>
<input id = "Button1" type = "bouton" value = "bouton" />
<entrée id = "bouton2" type = "bouton" value = "bouton" />
</docy>
</html>
Existe-t-il une meilleure façon de l'implémenter? . .