JS遅延プロンプトボックスの実装方法を詳しく解説

この記事では、主に JS 遅延プロンプト ボックスの実装方法を紹介し、サンプルの形で遅延プロンプト機能を実装するための 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ではクリアするために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 ビデオチュートリアル
2. JavaScript オンラインマニュアル
3 .ブートストラップ チュートリアル