Funktionseigenschaften zum Einstellen der Transparenz von DOM -Knoten in JS: filter = "alpha (opacity =" + value + ")" (kompatibel mit IE) und Opazität = Wert/100 (kompatibel mit FF und GG).
Schauen wir uns zunächst den Kompatibilitätscode zum Einstellen der Transparenz an:
Die Codekopie lautet wie folgt:
Funktionsetopazität (ELE, Deckkraft) {
if (ele.style.opacity! = undefiniert) {
/// kompatibel mit FF und GG und neuen Versionen von IE
ele.style.opacity = opazität / 100;
} anders {
/// kompatibel mit der alten Version dh dh
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
}
In Bezug auf einige Freunde habe ich Folgendes geschrieben:
Die Codekopie lautet wie folgt:
Funktionsetopazität (ELE, Deckkraft) {
if (document.all) {
/// kompatible dh
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
ele {
/// kompatibel mit FF und GG
ele.style.opacity = opazität / 100;
}
}
Ich möchte sagen, dass es ein Problem beim Laufen unter IE10 gibt, aber nach dem Klicken hat es nicht geantwortet. Da IE10 das Opazitätsattribut unterstützt, aber nicht filtert, ist diese Methode nicht ratsam.
Fadein -Funktionscode:
Die Codekopie lautet wie folgt:
Funktion fadein (Ele, Deckkraft, Geschwindigkeit) {
if (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", "") .replace (")", "") || ele.style.opacity;
v <1 && (v = v * 100);
var count = Geschwindigkeit / 1000;
var avg = count <2? (Deckkraft / Anzahl): (Deckkraft / Anzahl - 1);
var timer = null;
timer = setInterval (function () {
if (v <opazität) {
v += avg;
Setopazität (Ele, v);
} anders {
ClearInterval (Timer);
}
}, 500);
}
}
Fadeout -Funktionscode:
Die Codekopie lautet wie folgt:
Funktion Fadeout (Ele, Deckkraft, Geschwindigkeit) {
if (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", "") .replace (")", "") || ele.style.opacity || 100;
v <1 && (v = v * 100);
var count = Geschwindigkeit / 1000;
var avg = (100 - Opazität) / zählen;
var timer = null;
timer = setInterval (function () {
if (v - avg> opacity) {
v -= avg;
Setopazität (Ele, v);
} anders {
ClearInterval (Timer);
}
}, 500);
}
}
Hier ist ein Demo -Beispiel:
Die Codekopie lautet wie folgt:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "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 (Dokument.GetElementById ('DV'), 80, 6000);
}
}
</script>
</head>
<body>
<div id = "dv" style = "Hintergrundfarbe: Grün; Breite: 400px; Höhe: 400px;"> </div>
<input id = "button1" type = "button" value = "button" />
<input id = "button2" type = "button" value = "button" />
</body>
</html>
Gibt es eine bessere Möglichkeit, es umzusetzen? . .