인터넷정보

레이어 여러개 반투명하게 교차하기

알 수 없는 사용자 2007. 10. 10. 11:31
<SCRIPT lanugage="JavaScript">
var name = "layer"; //레이어의 이름.
var space = 1; //반투명 처리 간격.
var time1 = 0.1; //반투명도를 한간격 변경할 시간입니다. (초 단위)
var time2 = 2; //교차가 완료된 후 대기할 시간입니다. (초 단위)


var tran=1; //반투명도를 계산할 변수. (수정하는 것 아님)
var tranlr=1; //레이어1의 번호. (수정하는 것 아님)
function transparent() {
if(!document.getElementById(name+"1")) return; //레이어1이 없다면 그냥 함수를 끝낸다.
var tranlr2=tranlr+1; //교차할 그 다음의 레이어 (레이어2)
if(!document.getElementById(name+tranlr2)) tranlr2=1; //레이어2가 없다면 처음레이어로 돌아간다.
var preview = document.getElementById(name+tranlr);
var preview2 = document.getElementById(name+tranlr2);

if(preview2.style.opacity!="1") { //레이어2가 아직 반투명할 경우
preview2.style.display="block";

/* 여기부터는 Firefox의 방식 - style의 opacity가 1이면 불투명, 0이면 투명 */
var a=Math.round((tran - space*0.1)*10)/10; //레이어1의 변경될 투명도
var b=Math.round(Math.abs(a-1)*10)/10; //레이어2의 변경될 투명도. a에서 1을 뺀다음, 절대값.
preview.style.opacity=a;
preview2.style.opacity=b;

/* 여기부터는 IE의 방식 - filter:alpha가 opacity=100이면 불투명, 0이면 투명 */
a=tran*100 - space*10; //레이어1의 변경될 투명도
b=Math.abs(a - 100); //레이어2의 변경될 투명도. a에서 100을 뺀다음, 절대값.
preview.style.filter="alpha(opacity="+a+")";
preview2.style.filter="alpha(opacity="+b+")";

tran=tran - space*0.1;
setTimeout("transparent();", time1*1000);
} else { //레이어2가 완전히 보일 경우
preview.style.display="none";
tranlr++;
if(!document.getElementById(name+tranlr)) tranlr=1;
tran=1;
setTimeout("transparent();", time2*1000);
}
}
</SCRIPT>


</P> <DIV id=layer1 style="DISPLAY: block; POSITION: absolute">안녕하세요!</DIV>
<DIV id=layer2 style="DISPLAY: none; POSITION: absolute">반가워요~</DIV>
<DIV id=layer3 style="DISPLAY: none; POSITION: absolute">사랑합니다!</DIV>
<DIV id=layer4 style="DISPLAY: none; POSITION: absolute">알라뷰~♡</DIV>

<SCRIPT language=JavaScript>
//레이어 교차 함수 시작!
document.getElementById(name+"1").style.opacity=1;
document.getElementById(name+"1").style.filter="alpha(opacity=100)";
setTimeout("transparent();",time2*1000);
</SCRIPT>
반응형