快捷導(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)離開(kāi)頭像時(shí)信息框消失，當(dāng)鼠標(biāo)離開(kāi)信息框時(shí)信息框消失。

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

1、獲取元素。
2、當(dāng)鼠標(biāo)指向Div1時(shí)，Div2顯示。
3、當(dāng)鼠標(biāo)離開(kāi)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)離開(kāi)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>

由于代碼看起來(lái)多差不多，可以簡(jiǎn)化如下：

<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>

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

您可能感興趣的文章:

JS
提示框

相關(guān)文章

微信小程序用戶授權(quán)彈窗拒絕時(shí)引導(dǎo)用戶重新授權(quán)實(shí)現(xiàn)
我們?cè)陂_(kāi)發(fā)小程序時(shí)，如果想獲取用戶信息，就需要獲取用的授權(quán)，如果用戶誤點(diǎn)了拒絕授權(quán)，我們?cè)趺礃尤フ_的引導(dǎo)用戶重新授權(quán)呢。今天就來(lái)給大家講講如果正確的引導(dǎo)用戶授權(quán),需要的朋友可以參考下
2019-07-07
原生JavaScript實(shí)現(xiàn)Ajax的方法
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)Ajax的幾種方法，感興趣的小伙伴們可以參考一下
2016-04-04
JavaScript ES6中類與模塊化管理超詳細(xì)講解
JavaScript中的模塊化是指將每個(gè)js文件會(huì)被認(rèn)為單獨(dú)一個(gè)的模塊。模塊之間是互相不可見(jiàn)的。如果一個(gè)模塊需要使用另一個(gè)模塊，那么需要通過(guò)指定語(yǔ)法來(lái)引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容
2023-01-01
drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽
chrome的drag and drop API，它能將本地的圖片放到瀏覽器中進(jìn)行預(yù)覽，猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會(huì)發(fā)生什么事情，你的瀏覽器試圖打開(kāi)一個(gè)新的頁(yè)面并加載這個(gè)圖片。這篇文章給我們介紹drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽，需要的朋友可以參考下
2015-08-08
Canvas放置反彈效果隨機(jī)圖形(實(shí)例)
下面小編就為大家?guī)?lái)一篇Canvas放置反彈效果隨機(jī)圖形(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
JavaScript設(shè)計(jì)模式之單件模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之單件模式介紹,單件模式,就是靜態(tài)化的訪問(wèn)中已經(jīng)實(shí)例化的對(duì)象,這個(gè)對(duì)象只能通過(guò)一個(gè)唯一的入口訪問(wèn),已經(jīng)實(shí)例或待實(shí)例化的對(duì)象,需要的朋友可以參考下
2014-12-12
微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
在社交小程序里有個(gè)常見(jiàn)的場(chǎng)景是關(guān)注功能，我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例，講解一下關(guān)注功能如何實(shí)現(xiàn)
2022-08-08
使用JavaScript?將數(shù)據(jù)網(wǎng)格綁定到?GraphQL?服務(wù)的操作方法
GraphQL是管理JavaScript應(yīng)用程序中數(shù)據(jù)的優(yōu)秀工具,本教程展示了GraphQL和SpreadJS如何簡(jiǎn)單地構(gòu)建應(yīng)用程序,?GraphQL?和?SpreadJS都有更多功能可供探索,因此您可以做的事情遠(yuǎn)遠(yuǎn)超出了這個(gè)示例,感興趣的朋友一起看看吧
2023-11-11
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)?lái)一篇JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看
2016-04-04
微信小程序getLocation 需要在app.json中聲明permission字段
這篇文章主要介紹了微信小程序getLocation 需要在app.json中聲明permission字段，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03