마우스를 올렸을 때 레이어의 알파값 변화로 부드럽게 나타나기

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

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1