JavaScript プロンプト ボックスの遅延プロンプト コードの詳細な説明

プロンプトボックス機能: マウスがアバターをポイントすると、情報ボックスが表示され、マウスがアバターから離れると、情報ボックスが消えます。情報ボックスが消えます。

関数を実装するためのアイデア:

1. 要素を取得します。
2. マウスが p1 をポイントすると、p2 が表示されます。
3. マウスが p1 を離れるとき、0.5 秒遅れて p2 が消えるようにして、マウスを p2 に移動する時間を確保します。
4. マウスが p2 をポイントすると、p2 が表示されます。手順3でsetTimeoutを設定してp2を非表示にしているので、clearTimeout()でsetTimeoutをクリアするとp2が表示されます。
5. マウスが p2 を離れるとき、0.5 秒遅れて p2 が消えるようにして、マウスを p1 に向ける時間を確保します。
6. ステップ2でマウスポインタがp1に設定されており、p2が表示されますが、ステップ5でp2を消すためにsetTimeoutを設定しているため、ステップ2ではsetTimeoutをクリアしてp2を表示します。

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>

以上がJavaScript プロンプト ボックスの遅延プロンプト コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。