레이어 여러개 반투명하게 교차하기
인터넷정보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>
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>
'인터넷정보' 카테고리의 다른 글
쓸모있는 정규식 모음 JS버전 (0) | 2007.10.10 |
---|---|
IE/FF(Gecko,W3C) 이벤트 설명 (0) | 2007.10.10 |
오른쪽마우스버튼,키보드 입력 방지,드래그금지, 특정키 제어 (0) | 2007.10.10 |
오픈마켓 광고, 옥션 광고, 지마켓 광고, 엠플 광고, 온켓 광고 (0) | 2007.10.10 |
폰트 사이트 (0) | 2007.10.10 |
모서리 둥근 테이블, 이미지 없이 구현하기 (0) | 2007.10.10 |
로딩 페이지에 들어갈 이미지가 여기다 있습니다 (0) | 2007.10.10 |
라이트박스 효과 (이미지, 아이프렘, html 지원) (0) | 2007.10.10 |
클릭 한번으로 창 여러개 두개 이상 띄우기 (0) | 2007.10.10 |
스크립트로 이미지 모서리를 둥글게 (0) | 2007.10.10 |