JS에서 DOM 노드의 투명성을 설정하기위한 기능 속성 : Filter = "Alpha (exacity =" + value + ")"(IE와 호환) 및 불투명도 = value/100 (FF 및 GG와 호환).
먼저 투명성 설정을위한 호환성 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
함수 setOpacity (ele, 불투명도) {
if (ele.style.opacity! = undefined) {
/// FF 및 GG와 호환 및 IE의 새로운 버전
ele.style.opacity = 불투명도 / 100;
} 또 다른 {
/// 이전 버전과 호환됩니다
ele.style.filter = "alpha (incacity =" + recacity + ")";
}
}
친구들과 관련하여 나는 이것을 썼다 :
코드 사본은 다음과 같습니다.
함수 setOpacity (ele, 불투명도) {
if (document.all) {
/// 호환성 IE
ele.style.filter = "alpha (incacity =" + recacity + ")";
}
엘리 {
/// FF 및 GG와 호환됩니다
ele.style.opacity = 불투명도 / 100;
}
}
IE10에서 실행하는 데 문제가 있다고 말하고 싶지만 클릭 후에 응답하지 않았습니다. IE10은 불투명 속성을 지원하지만 필터는 없기 때문에이 방법은 권장되지 않습니다.
Fadein 기능 코드 :
코드 사본은 다음과 같습니다.
기능 페이드 인 (Ele, 불투명도, 속도) {
if (ele) {
var v = ele.style.filter.replace ( "alpha (opacity =", "") .replace ( ")", "") || ele.style.opacity;
v <1 && (v = v * 100);
var count = 속도 / 1000;
var avg = count <2? (불투명도 / 수) : (불투명 / 카운트 -1);
var timer = null;
타이머 = setInterval (function () {
if (v <불투명) {
v += AVG;
setOpacity (Ele, V);
} 또 다른 {
ClearInterval (타이머);
}
}, 500);
}
}
페이드 아웃 함수 코드 :
코드 사본은 다음과 같습니다.
기능 페이드 아웃 (Ele, 불투명도, 속도) {
if (ele) {
var v = ele.style.filter.replace ( "alpha (opacity =", "") .replace ( ")", "") || ele.style.opacity || 100;
v <1 && (v = v * 100);
var count = 속도 / 1000;
var avg = (100- 불투명) / 수;
var timer = null;
타이머 = 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>
<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);
}
}
</스크립트>
</head>
<body>
<div id = "dv"style = "배경색 : 녹색; 너비 : 400px; 높이 : 400px;"> </div>
<input id = "button1"type = "button"value = "button" />
<입력 id = "button2"type = "button"value = "button" />
</body>
</html>
이를 구현하는 더 좋은 방법이 있습니까? . .