Propiedades de la función para configurar la transparencia de los nodos DOM en js: filtre = "alfa (opacidad =" + valor + ")" (compatible con IE) y opacidad = valor/100 (compatible con ff y gg).
Primero veamos el código de compatibilidad para configurar la transparencia:
La copia del código es la siguiente:
función setOpacity (ELE, Opacidad) {
if (ele.style.opacity! = Undefined) {
/// Compatible con FF y GG y nuevas versiones de IE
ele.style.opacity = opacidad / 100;
} demás {
/// Compatible con la versión anterior es decir
ele.style.filter = "alfa (opacidad =" + opacidad + ")";
}
}
Con respecto a algunos amigos, escribí esto:
La copia del código es la siguiente:
función setOpacity (ELE, Opacidad) {
if (document.all) {
/// compatible es decir
ele.style.filter = "alfa (opacidad =" + opacidad + ")";
}
ele {
/// Compatible con FF y GG
ele.style.opacity = opacidad / 100;
}
}
Quiero decir que hay un problema con la ejecución en IE10, pero no respondió después de hacer clic. Debido a que IE10 admite el atributo de opacidad pero no el filtro, este método no es aconsejable.
Código de función de Fadein:
La copia del código es la siguiente:
función fadein (ele, opacidad, velocidad) {
if (ele) {
var v = ele.style.filter.replace ("alfa (opacidad =", "") .replace (")", "") || Ele.style.opacity;
v <1 && (v = v * 100);
Var Count = Velocidad / 1000;
var avg = count <2? (opacidad / recuento): (opacidad / recuento - 1);
VAR TIMER = NULL;
timer = setInterval (function () {
if (v <opacidad) {
v += avg;
setOpacity (ele, v);
} demás {
ClearInterval (temporizador);
}
}, 500);
}
}
Código de función de desvanecimiento:
La copia del código es la siguiente:
Función FadeOut (ELE, Opacidad, Velocidad) {
if (ele) {
var v = ele.style.filter.replace ("alfa (opacidad =", "") .replace (")", "") || ele.style.opacity || 100;
v <1 && (v = v * 100);
Var Count = Velocidad / 1000;
var avg = (100 - opacidad) / recuento;
VAR TIMER = NULL;
timer = setInterval (function () {
if (v - avg> opacidad) {
V -= AVG;
setOpacity (ele, v);
} demás {
ClearInterval (temporizador);
}
}, 500);
}
}
Aquí hay un ejemplo de demostración:
La copia del código es la siguiente:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "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 (document.getElementById ('dv'), 80, 6000);
}
}
</script>
</ablo>
<Body>
<div id = "dv" style = "Color de fondo: verde; ancho: 400px; altura: 400px;"> </div>
<input id = "button1" type = "button" valor = "botón" />
<input id = "button2" type = "button" value = "button" />
</body>
</html>
¿Hay alguna mejor manera de implementarlo? . .