JS延時提示框實作方法詳解

這篇文章主要介紹了JS延時提示框實現方法,以實例形式較為詳細的分析了JavaScript實現延時提示功能的原理與具體實現步驟,具有一定參考借鑒價值,需要的朋友可以參考下

提示框功能：當滑鼠指向頭像時，會彈出一個訊息框，滑鼠可移動到訊息框，當滑鼠離開頭像時訊息框消失，當滑鼠離開訊息框時訊息框消失。

實現功能思路：

1、取得元素。
2、當滑鼠指向p1時，p2顯示。
3、當滑鼠離開p1時，使p2延遲0.5秒消失，這樣以便有時間把滑鼠移到p2。
4、當滑鼠指向p2時，p2顯示。因為步驟3設定setTimeout使p2消失，所以把用clearTimeout()把setTimeout清除了就可以實現p2顯示了。
5、當滑鼠離開p2時，使p2延遲0.5秒消失，這樣以便有時間把滑鼠指向p1。
6、第2步已經設定了滑鼠指向p1，p2就顯示，但由於第5步設定setTimeout使p2消失，所以在第2步加上clearTimeout()把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>

【相關教學推薦】

1. JavaScript影片教學
2. JavaScript線上手冊
3. bootstrap教學