[Javascript] - 레이어 Fade In & Fade Out
Javascript 2011. 6. 28. 18:17[Javascript] - 레이어 Fade in & 레이어 Fade out
----------------- 레이어 Fade in -----------------
<script language="JavaScript1.2">
i = 0;
function showlayer () {
if (i == 0) {
document.getElementById("Fade in될 레이어ID").style.display='block';
document.getElementById("Fade in될 레이어ID").style.opacity = 0;
document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity=0)";
}
i = i + 25;
var op = i / 100;
//alert(op);
document.getElementById("Fade in될 레이어ID").style.opacity = 1 + op;
document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity="+(0 + i)+")";
//alert(document.getElementById("Fade in될 레이어ID").style.filter);
if(i > 99){
clearInterval(tid);
i = 0;
//alert(i);
}
}
function show(){
tid = setInterval(showlayer,50);
}
</script>
onclick = "show();"
----------------- 레이어 Fade out -----------------
<script language="JavaScript">
i = 0;
function hideLayer () {
i = i + 25;
var op = i / 100;
//alert(j);
parent.document.getElementById("Fade out될 레이어ID").style.opacity = 1 - op;
parent.document.getElementById("Fade out될 레이어ID").style.filter = "alpha(opacity="+(100 - i)+")";
//alert(document.getElementById("Fade out될 레이어ID").style.filter);
if(i > 99){
clearInterval(tid);
parent.document.getElementById("Fade out될 레이어ID").style.display='none';
i = 0;
}
}
function hide(){
tid = setInterval(hideLayer,50);
}
</script>
onclick = "hide();"
'Javascript' 카테고리의 다른 글
[Javascript] - 동영상 제어 (0) | 2011.06.29 |
---|---|
[Javascript] - 슬라이딩 터치 (0) | 2011.06.28 |
[Javascript] - 달력(심플) (0) | 2011.06.28 |
[Javascript] - 페이지 로딩 소스 (0) | 2011.06.28 |
[Javascript] - 클릭시 펼침 메뉴 (0) | 2011.06.28 |