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

<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) 명령어
[공지] 기술 게시판
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11
2.12
2.13
2.14
2.15
2.16
2.17
2.18
2.19
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28