Propriedades da função para definir a transparência dos nós DOM em js: filter = "alfa (opacity =" + value + ")" (compatível com ie) e opacidade = value/100 (compatível com FF e GG).
Vamos primeiro analisar o código de compatibilidade para definir a transparência:
A cópia do código é a seguinte:
Função Setopacity (ELE, Opacity) {
if (ele.style.opacity! = indefinido) {
/// compatível com FF e GG e novas versões do IE
ele.style.Opacity = Opacity / 100;
} outro {
/// compatível com a versão antiga, ou seja,
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
}
Em relação a alguns amigos, escrevi isso:
A cópia do código é a seguinte:
Função Setopacity (ELE, Opacity) {
if (document.all) {
/// compatível IE
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
ele {
/// compatível com FF e GG
ele.style.Opacity = Opacity / 100;
}
}
Quero dizer que há um problema em correr no IE10, mas ele não respondeu depois de clicar. Como o IE10 suporta o atributo de opacidade, mas não o filtro, esse método não é aconselhável.
Código da função Fadein:
A cópia do código é a seguinte:
função fadein (ele, opacidade, velocidade) {
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 = contagem <2? (Opacity / contagem): (Opacity / contagem - 1);
Var Timer = NULL;
Timer = setInterval (function () {
if (v <opacidade) {
v += avg;
Setopacity (ELE, V);
} outro {
ClearInterval (timer);
}
}, 500);
}
}
Código de função Fadeout:
A cópia do código é a seguinte:
função fadeout (ele, opacidade, velocidade) {
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 - opacidade) / contagem;
Var Timer = NULL;
Timer = setInterval (function () {
if (v - avg> opacity) {
v -= avg;
Setopacity (ELE, V);
} outro {
ClearInterval (timer);
}
}, 500);
}
}
Aqui está um exemplo de demonstração:
A cópia do código é a seguinte:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<Body>
<div id = "dv" style = "cor de fundo: verde; largura: 400px; altura: 400px;"> </div>
<input id = "button1" type = "button" value = "botão" />
<input id = "button2" type = "button" value = "botão" />
</body>
</html>
Existe alguma maneira melhor de implementá -lo? . .