JS延時提示框?qū)崿F(xiàn)方法詳解

更新時間：2015年11月26日 12:39:28 作者：yexingwen

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

本文實例講述了JS延時提示框?qū)崿F(xiàn)方法。分享給大家供大家參考，具體如下：

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

實現(xiàn)功能思路：

1、獲取元素。
2、當鼠標指向Div1時，Div2顯示。
3、當鼠標離開Div1時，使Div2延遲0.5秒消失，這樣以便有時間把鼠標移到Div2。
4、當鼠標指向Div2時，Div2顯示。因為第3步設(shè)置setTimeout使Div2消失，所以把用clearTimeout()把setTimeout清除了就可以實現(xiàn)Div2顯示了。
5、當鼠標離開Div2時，使Div2延遲0.5秒消失，這樣以便有時間把鼠標指向Div1。
6、第2步已經(jīng)設(shè)置了鼠標指向Div1，Div2就顯示，但由于第5步設(shè)置setTimeout使Div2消失，所以在第2步加上clearTimeout()把setTimeout清除了就可以實現(xiàn)Div2顯示了。

JS代碼：

<script>
window.onload=function()
{
  var oDiv1=document.getElementById('div1');
  var oDiv2=document.getElementById('div2');
  time=null;
  oDiv1.onmouseover=function()
  {
    clearTimeout(time);
    oDiv2.style.display='block';  
  };
  oDiv1.onmouseout=function()
  {
    time=setTimeout(function(){
      oDiv2.style.display='none';
    },500);
  };
  oDiv2.onmouseover=function()
  {
    clearTimeout(time);
  };
  oDiv2.onmouseout=function()
  {
    time=setTimeout(function(){
      oDiv2.style.display='none';
    },500);
  };
};
</script>

由于代碼看起來多差不多，可以簡化如下：

<script>
window.onload=function()
{
  var oDiv1=document.getElementById('div1');
  var oDiv2=document.getElementById('div2');
  time=null;
  oDiv2.onmouseover=oDiv1.onmouseover=function()
  {
    clearTimeout(time);
    oDiv2.style.display='block';  
  };
  oDiv2.onmouseout=oDiv1.onmouseout=function()
  {
    time=setTimeout(function(){
      oDiv2.style.display='none';
    },500);
  };
};
</script>

HTML、CSS代碼：

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

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

JS
提示框

相關(guān)文章

微信公眾號開發(fā) 實現(xiàn)點擊返回按鈕就返回到聊天界面
本文分享了微信公眾號開發(fā)實現(xiàn)點擊返回按鈕就返回到聊天界面的示例代碼。需要的朋友一起來看下吧
2016-12-12
js控制radio選中、不可選和改變事件實例代碼
這篇文章主要給大家介紹了關(guān)于js控制radio選中、不可選和改變事件的相關(guān)資料,我們經(jīng)常會遇到j(luò)s控制radio選中和切換的問題,需要的朋友可以參考下
2023-07-07
JS鼠標拖拽實例分析
這篇文章主要介紹了JS鼠標拖拽實現(xiàn)方法,實例分析JavaScript鼠標事件及頁面元素屬性動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
常用參考資料（手冊）下載或者鏈接
常用參考資料（手冊）下載或者鏈接...
2006-07-07
js監(jiān)聽鼠標點擊和鍵盤點擊事件并自動跳轉(zhuǎn)頁面
這篇文章主要介紹了js監(jiān)聽鼠標點擊(onmousedown)和鍵盤點擊(onkeydown)事件并自動跳轉(zhuǎn)頁面，很簡單的一個實現(xiàn)
2014-09-09
JavaScript 的繼承
大家都知道，C#中使用的是傳統(tǒng)的類繼承是很簡單，但在JS中，可就沒這么簡單了，因為它使用的是原型(prototype )繼承，實現(xiàn)起來相對復雜了一點。
2011-10-10
基于JavaScript實現(xiàn)的順序查找算法示例
這篇文章主要介紹了基于JavaScript實現(xiàn)的順序查找算法,結(jié)合實例形式分析了javascript順序查找的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下
2017-04-04
JavaScript模板引擎EJS特性及用法詳解
EJS是一種簡單而靈活的模板引擎，用于將數(shù)據(jù)動態(tài)渲染到網(wǎng)頁上，本文將從介紹EJS的背景和起源開始，詳細介紹EJS的特性和使用方法，包括安裝配置、基本語法和標簽、數(shù)據(jù)綁定和邏輯控制、模板的繼承和包含等方面，感興趣的同學跟著小編一起來學習吧
2023-06-06
JS獲取當前使用的瀏覽器名字以及版本號實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取當前使用的瀏覽器名字以及版本號實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
使用ionic在首頁新聞中應(yīng)用到的跑馬燈效果的實現(xiàn)方法
在app中經(jīng)常會有滾動的跑馬燈效果的運用，接下來通過本文給大家介紹使用ionic在首頁新聞中應(yīng)用到的跑馬燈效果的實現(xiàn)方法，需要的的朋友參考下
2017-02-02