JS 지연 프롬프트 상자 구현 방법에 대한 자세한 설명

이 글에서는 주로 JS 지연 프롬프트 상자의 구현 방법을 소개하고, 지연 프롬프트 기능을 구현하기 위한 JavaScript의 원리와 구체적인 구현 단계를 예제 형식으로 분석합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

프롬프트 상자 기능: 아바타를 마우스로 가리키면 정보 상자가 나타납니다. 마우스를 아바타에서 벗어나면 정보 상자가 사라집니다. 마우스가 정보 상자를 벗어나면 정보 상자가 사라집니다.

함수 아이디어:

1. 요소를 가져옵니다.
2. 마우스가 p1을 가리키면 p2가 표시됩니다.
3. 마우스가 p1을 떠날 때 p2가 0.5초 지연되어 사라지도록 하여 마우스를 p2로 이동할 시간을 줍니다.
4. 마우스가 p2를 가리키면 p2가 표시됩니다. p2가 사라지도록 3단계에서 setTimeout을 설정했기 때문에,clearTimeout()으로 setTimeout을 지워서 p2를 표시할 수 있습니다.
5. 마우스가 p2를 떠날 때 p2가 0.5초 지연되어 사라지도록 하여 마우스가 p1을 가리킬 시간을 확보합니다.
6. 2단계에서 마우스 포인터가 p1로 설정되어 p2가 표시됩니다. 그러나 5단계에서 p2가 사라지도록 setTimeout을 설정했기 때문에 2단계에서는 Clear에 ClearTimeout()을 추가합니다. p2를 표시하는 setTimeout입니다.

JS 코드:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

코드가 유사해 보이기 때문에 다음과 같이 단순화할 수 있습니다.

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

HTML, CSS 코드 :

<p id="p1"></p>
<p id="p2"></p>
<style>
#p1{float:left;margin-right:10px;width:50px;height:50px;background:black;}
#p2{display:none;float:left;width:200px;height:200px;background:#0CF;}
</style>

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
JavaScript 온라인 매뉴얼
3 . 부트스트랩 튜토리얼