Native js implementiert Fadein- und Fadeout-Effekt_Javascript-Fähigkeiten

Funktionsattribute zum Festlegen der Transparenz von DOM-Knoten in js: filter= "alpha(opacity=" value ")" (kompatibel mit IE) und opacity=value/100 (kompatibel mit FF und GG).

Sehen wir uns zunächst den Kompatibilitätscode zum Festlegen der Transparenz an:

Kopieren Sie den Code Der Code lautet wie folgt:

function setOpacity(ele, opacity) {
if (ele.style.opacity != undefiniert) {
///Kompatibel mit FF, GG und neuer Version IE
ele.style.opacity = opacity / 100;

} else {
///Kompatibel mit älteren Versionen, dh
ele.style.filter = "alpha(opacity=" opacity ")";
}
}

Einige Freunde schreiben so:

Kopieren Sie den Code Der Code lautet wie folgt:

function setOpacity(ele, opacity) {
if (document.all) {
///Kompatibel mit ie
ele.style.filter = "alpha(opacity=" opacity " )";
ele {
///Kompatibel mit FF und GG
ele.style.opacity = opacity /
}
}

Ich möchte sagen, dass es beim Ausführen unter IE10 ein Problem gibt. Nach dem Klicken erfolgt keine Reaktion. Da IE10 das Opazitätsattribut, aber keinen Filter unterstützt, ist diese Methode nicht zu empfehlen.

Fadein-Funktionscode:

Code kopieren Der Code lautet wie folgt:

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


Ausblenden Funktionscode:

Code kopieren

Der Code lautet wie folgt: Funktion Ausblenden( ele, opacity, speed) { if (ele) { var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") | |. ele.style.opacity ||. 100; var timer = null;

timer = setInterval(function() {

if (v - avg > opacity) {
v -= avg;
setOpacity(ele, v);
} else {
clearInterval(timer);
}
}, 500
}
}


Das Folgende ist ein Demo-Beispiel:




Code kopieren

Der Code lautet wie folgt:

id="Button1" type="button" value="button" />
/body>


Wenn Sie eine bessere Implementierung haben, hinterlassen Sie bitte eine Nachricht. . .