조회 : 350
<span layer_up(Layer1);" >메뉴1</span>
※ Layer1,Layer2,Layer3,Layer4 라는 레이어를 사용하고 있을 경우
메뉴1에 마우스 커서를 올리면 해당 레이어가 부드럽게 나타나고, 나머지 레이어를 사라진다.
<script>
//----------- 레이어 알파 변화용-----------
layer_target= null;
layer_id_time= null;
count_alpha = 0;
var alpha_step = 5; //알파 변화 단계
var alpha_max = 100; //최대 알파값
function layer_up(layer_zero)
{
layer_target = layer_zero;
if(layer_target.style.visibility != 'visible'){
layer_down()
layer_target.style.visibility = 'visible';
ch_layer();
}
}
function ch_layer()
{
layer_target.style.filter = "alpha(opacity="+count_alpha+")" ;
layer_target.style.visibility = 'visible';
//alert(layer_target.style.filter);
count_alpha += alpha_step;
if(count_alpha < (alpha_max+1)){ layer_id_time = setTimeout(ch_layer , 100); }
}
function layer_down()
{
count_alpha = 0;
//clearTimeout(layer_id_time)
Layer1.style.visibility = 'hidden';
Layer2.style.visibility = 'hidden';
Layer3.style.visibility = 'hidden';
Layer4.style.visibility = 'hidden';
Layer1.style.filter = 'alpha(opacity=0)';
Layer2.style.filter = 'alpha(opacity=0)';
Layer3.style.filter = 'alpha(opacity=0)';
Layer4.style.filter = 'alpha(opacity=0)';
// this_target.style.color ='#cecece';
}
//----------------------------------------------------
</script>
| 제목 |
|---|
| [기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js) |
| 유용한 리눅스(LINUX) 명령어 |
| [공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
|---|---|---|---|---|---|---|
|
11.30
|
12.1
|
12.2
|
12.3
|
12.4
|
12.5
|
12.6
|
|
12.7
|
12.8
|
12.9
|
12.10
|
12.11
|
12.12
|
12.13
|
|
12.14
|
12.15
|
12.16
|
12.17
|
12.18
|
12.19
|
12.20
|
|
12.21
|
12.22
|
12.23
|
12.24
|
12.25
|
12.26
|
12.27
|
|
12.28
|
12.29
|
12.30
|
12.31
|
1.1
|
1.2
|
1.3
|