Свойства функции для установки прозрачности узлов DOM в JS: Filter = "Alpha (opaticy =" + value + ")" (совместим с IE) и непрозрачность = значение/100 (совместим с FF и GG).
Давайте сначала посмотрим на код совместимости для установки прозрачности:
Кода -копия выглядит следующим образом:
Функция setoPacity (ele, opacity) {
if (ele.style.opacity! = undefined) {
/// Совместим с FF и GG и новыми версиями IE
ele.style.opacity = непрозрачность / 100;
} еще {
/// Совместим со старой версией, т.е.
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
}
Что касается друзей, я написал это:
Кода -копия выглядит следующим образом:
Функция setoPacity (ele, opacity) {
if (document.all) {
/// Совместимый т.е.
ele.style.filter = "alpha (opacity =" + opacity + ")";
}
ele {
/// Совместим с FF и GG
ele.style.opacity = непрозрачность / 100;
}
}
Я хочу сказать, что есть проблема с запуском под IE10, но он не ответил после нажатия. Поскольку IE10 поддерживает атрибут непрозрачности, но не фильтр, этот метод не рекомендуется.
Функциональный код Fadein:
Кода -копия выглядит следующим образом:
Функция 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 = speed / 1000;
var avg = count <2? (непрозрачность / счет): (непрозрачность / счет - 1);
var timer = null;
timer = setInterval (function () {
if (v <непрозрачность) {
v += avg;
SetoPacity (Ele, V);
} еще {
ClearInterval (таймер);
}
}, 500);
}
}
Код функции FADEOUT:
Кода -копия выглядит следующим образом:
Функция FADEOUT (ELE, непрозрачность, скорость) {
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 - непрозрачность) / count;
var timer = null;
timer = setInterval (function () {
if (v - avg> непрозрачность) {
v -= avg;
SetoPacity (Ele, V);
} еще {
ClearInterval (таймер);
}
}, 500);
}
}
Вот демонстрационный пример:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<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>
<тело>
<div id = "dv" style = "foangy-color: green; ширина: 400px; высота: 400px;"> </div>
<input id = "button1" type = "button" value = "кнопка" />
<input id = "button2" type = "кнопка" value = "кнопка" />
</body>
</html>
Есть ли лучший способ его реализовать? Полем Полем