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

안녕하세요!

반가워요~

사랑합니다!

알라뷰~♡

 

<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>