快捷導(dǎo)航

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

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

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

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

提示框功能：當(dāng)鼠標(biāo)指向頭像時(shí)，彈出一個(gè)信息框，鼠標(biāo)可移動(dòng)到信息框，當(dāng)鼠標(biāo)離開頭像時(shí)信息框消失，當(dāng)鼠標(biāo)離開信息框時(shí)信息框消失。

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

1、獲取元素。
2、當(dāng)鼠標(biāo)指向Div1時(shí)，Div2顯示。
3、當(dāng)鼠標(biāo)離開Div1時(shí)，使Div2延遲0.5秒消失，這樣以便有時(shí)間把鼠標(biāo)移到Div2。
4、當(dāng)鼠標(biāo)指向Div2時(shí)，Div2顯示。因?yàn)榈?步設(shè)置setTimeout使Div2消失，所以把用clearTimeout()把setTimeout清除了就可以實(shí)現(xiàn)Div2顯示了。
5、當(dāng)鼠標(biāo)離開Div2時(shí)，使Div2延遲0.5秒消失，這樣以便有時(shí)間把鼠標(biāo)指向Div1。
6、第2步已經(jīng)設(shè)置了鼠標(biāo)指向Div1，Div2就顯示，但由于第5步設(shè)置setTimeout使Div2消失，所以在第2步加上clearTimeout()把setTimeout清除了就可以實(shí)現(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è)計(jì)有所幫助。

您可能感興趣的文章:

JS
提示框

相關(guān)文章

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