네이티브 js는 페이드인 및 페이드아웃 effect_javascript 기술을 구현합니다.

js에서 DOM 노드의 투명도를 설정하기 위한 함수 속성: filter= "alpha(opacity=" value ")"(IE와 호환 가능) 및 opacity=value/100(FF 및 GG와 호환 가능).

투명도 설정을 위한 호환성 코드를 먼저 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

function setOpacity(ele, opacity) {
if (ele.style.opacity != undefine) {
///FF, GG 및 새 버전 IE와 호환
ele.style.opacity = opacity / 100;

} else {
///이전 버전과 호환됩니다. 즉
ele.style.filter = "alpha(opacity=" opacity ")";
}
}

어떤 친구들은 이렇게 씁니다.

코드 복사 코드는 다음과 같습니다.

function setOpacity(ele, opacity) {
if (document.all) {
///ie
ele.style.filter와 호환 가능 = "alpha(opacity=" opacity " )";
}
ele {
///FF 및 GG와 호환 가능
ele.style.opacity = opacity / 100>}
}

IE10에서 실행시 문제가 있다고 말씀드리고 싶습니다. 클릭 후 반응이 없습니다. IE10은 불투명도 속성을 지원하지만 필터는 지원하지 않으므로 이 방법은 권장되지 않습니다.

fadein 함수 코드:

코드 복사 코드는 다음과 같습니다.

function fadein (ele, opacity, speed) {
if (ele) {
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || v var count = 속도 / 1000; / 개수) : (불투명도 / 개수 - 1);
var 타이머 = null
timer = setInterval(function() {
if (v v = avg; 🎜>setOpacity(ele, v);
} else {
clearInterval(timer)
}
}, 500)
}

fadeout 함수 코드:

코드 복사

코드는 다음과 같습니다. function fadeout( ele, 불투명도, 속도) { if (ele) { var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") | | ele.style.opacity || 100; v var count = 속도 / 1000;

var 타이머 = null;

timer = setInterval(function() {
if (v - avg > opacity) {
v -= avg;
setOpacity(ele, v);
} else {
clearInterval(timer);
}
}, 500)
}
}


다음은 데모 예시입니다.




코드 복사

코드는 다음과 같습니다.

window.onload = 함수 () {


document.getElementById('Button1').onclick = 함수 ( ) {

fadeout( document.getElementById('DV'), 0, 6000)

}
document.getElementById('Button2').onclick = function () {

fadein(document.getElementById ('DV'), 80, 6000)

}
}
>

/body>



더 나은 구현이 있으면 메시지를 남겨주세요. . .