快捷導(dǎo)航

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

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

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

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

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

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

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

您可能感興趣的文章:

JS
提示框

相關(guān)文章

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