خصائص الوظيفة لتحديد شفافية العقد DOM في JS: Filter = "alpha (opitated =" + value + ")" (متوافق مع IE) و Opant = value/100 (متوافق مع FF و GG).
دعونا أولاً نلقي نظرة على رمز التوافق لإعداد الشفافية:
نسخة الكود كما يلي:
وظيفة setOpacity (ELE ، عتامة) {
if (ele.style.Opacity! = غير محدد) {
/// متوافق مع FF و GG والإصدارات الجديدة من IE
ele.Style.Opacity = التعتيم / 100 ؛
} آخر {
/// متوافق مع الإصدار القديم أي
eLe.Style.Filter = "alpha (opacity =" + opacity + ")" ؛
}
}
بخصوص بعض الأصدقاء ، كتبت هذا:
نسخة الكود كما يلي:
وظيفة setOpacity (ELE ، عتامة) {
if (document.all) {
/// متوافق IE
eLe.Style.Filter = "alpha (opacity =" + opacity + ")" ؛
}
ele {
/// متوافق مع FF و GG
ele.Style.Opacity = التعتيم / 100 ؛
}
}
أريد أن أقول إن هناك مشكلة في الركض بموجب IE10 ، لكنها لم تستجب بعد النقر. نظرًا لأن IE10 يدعم سمة العتامة ولكن ليس مرشحًا ، فإن هذه الطريقة غير مستحقة.
رمز وظيفة Fadein:
نسخة الكود كما يلي:
وظيفة Fadein (ELE ، العتامة ، السرعة) {
إذا (ELE) {
var v = ele.style.filter.replace ("alpha (opacity =" ، "") .replace (")" ، "") || ele.Style.Opacity ؛
v <1 && (v = v * 100) ؛
var count = speed / 1000 ؛
var avg = count <2؟ (العتامة / العد): (العتامة / العد - 1) ؛
var timer = null ؛
Timer = setInterval (function () {
if (v <opacity) {
v += avg ؛
setOpacity (ele ، v) ؛
} آخر {
ClearInterval (مؤقت) ؛
}
} ، 500) ؛
}
}
رمز وظيفة تلاشي:
نسخة الكود كما يلي:
وظيفة Fadeout (ELE ، العتامة ، السرعة) {
إذا (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 - العتامة) / العد ؛
var timer = null ؛
Timer = setInterval (function () {
if (v - avg> opatity) {
v -= avg ؛
setOpacity (ele ، v) ؛
} آخر {
ClearInterval (مؤقت) ؛
}
} ، 500) ؛
}
}
هنا مثال تجريبي:
نسخة الكود كما يلي:
<! 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 = "الخلفية اللون: الأخضر ؛ العرض: 400px ؛ الارتفاع: 400px ؛"> </div>
<input id = "button1" type = "button" value = "button" />
<input id = "button2" type = "button" value = "button" />
</body>
</html>
هل هناك طريقة أفضل لتنفيذها؟ . .