Properti fungsi untuk mengatur transparansi node DOM di JS: filter = "alpha (opacity =" + value + ")" (kompatibel dengan IE) dan opacity = value/100 (kompatibel dengan FF dan GG).
Mari pertama -tama lihat kode kompatibilitas untuk mengatur transparansi:
Salinan kode adalah sebagai berikut:
fungsi setopacity (ele, opacity) {
if (ele.style.opacity! = tidak terdefinisi) {
/// kompatibel dengan FF dan GG dan versi baru IE
ele.style.opacity = opacity / 100;
} kalau tidak {
/// kompatibel dengan versi lama yaitu
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
}
Mengenai beberapa teman, saya menulis ini:
Salinan kode adalah sebagai berikut:
fungsi setopacity (ele, opacity) {
if (document.all) {
/// kompatibel yaitu
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
ele {
/// kompatibel dengan FF dan GG
ele.style.opacity = opacity / 100;
}
}
Saya ingin mengatakan bahwa ada masalah dengan berjalan di bawah IE10, tetapi itu tidak merespons setelah mengklik. Karena IE10 mendukung atribut opacity tetapi tidak filter, metode ini tidak disarankan.
Kode fungsi fadein:
Salinan kode adalah sebagai berikut:
fungsi fadein (ele, opacity, speed) {
if (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", "") .replace (")", "") || ele.style.opacity;
v <1 && (v = v * 100);
var count = kecepatan / 1000;
var avg = hitung <2? (opacity / count): (opacity / count - 1);
var timer = null;
timer = setInterval (function () {
if (v <opacity) {
v += rata -rata;
setopacity (ele, v);
} kalau tidak {
clearInterval (timer);
}
}, 500);
}
}
Kode Fungsi Fadeout:
Salinan kode adalah sebagai berikut:
fungsi fadeout (ele, opacity, speed) {
if (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", "") .replace (")", "") || Ele.Style.opacity || 100;
v <1 && (v = v * 100);
var count = kecepatan / 1000;
var avg = (100 - opacity) / count;
var timer = null;
timer = setInterval (function () {
if (v - avg> opacity) {
v -= rata -rata;
setopacity (ele, v);
} kalau tidak {
clearInterval (timer);
}
}, 500);
}
}
Berikut adalah contoh demo:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> </title>
<script type = "text/javascript" src = "fade.js"> </script>
<type skrip = "Teks/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 = "latar belakang-warna: hijau; lebar: 400px; tinggi: 400px;"> </div>
<input id = "button1" type = "tombol" value = "Tombol" />
<input id = "button2" type = "tombol" value = "Tombol" />
</body>
</html>
Apakah ada cara yang lebih baik untuk mengimplementasikannya? . .