JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
更新時(shí)間：2017年12月28日 14:47:21 作者：玉面靈狐
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
JS實(shí)現(xiàn)延遲隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延遲隱藏</title>
<style>
#div1{
width:100px;
height:100px;
background:yellow;
border: 5px solid #999;
border-radius: 10px;
position: absolute;
right: 50px;
text-align: center;
line-height: 100px;
margin-bottom:10px;
}
#div2{
width:200px;
float: left;
height:200px;
border: 5px solid #999;
border-radius: 10px;
position: absolute;
right:160px;
text-align: center;
line-height: 200px;
background:green;
display:none;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
div1.innerHTML="鼠標(biāo)請(qǐng)放上！";
var div2=document.getElementById('div2');
div2.innerHTML="鼠標(biāo)請(qǐng)移開！";
var timer=null;
div1.onmouseover= function(){
clearTimeout(timer);
div2.style.display='block';
};
div1.onmouseout= function(){
clearTimeout(timer);
timer= setTimeout(function(){
div2.style.display='none';
}, 700);
};
div2.onmouseover=function(){
clearTimeout(timer);
};
div2.onmouseout=function(){
clearTimeout(timer);
timer=setTimeout(function(){div2.style.display='none';},700);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
以上這篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)文字頭像的生成代碼
- javascript頭像上傳代碼實(shí)例
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- Django+JS 實(shí)現(xiàn)點(diǎn)擊頭像即可更改頭像的方法示例
- javascript填充默認(rèn)頭像方法
- 使用cropper.js裁剪頭像的實(shí)例代碼
- jQuery用戶頭像裁剪插件cropbox.js使用詳解
- web前端開發(fā)upload上傳頭像js示例代碼
- JavaScript頭像上傳插件源碼分享
- js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
相關(guān)文章
JS(JQuery)操作Array的相關(guān)方法介紹
本篇文章主要是對(duì)JS(JQuery)操作Array的相關(guān)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02 
這篇文章主要介紹了JS前端筆試題,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)組及日期操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12 
JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)
下面小編就為大家?guī)?lái)一篇JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11 
這篇文章主要介紹了js加入收藏夾代碼并兼容ie/ff/op,需要的朋友可以參考下
2014-05-05 
JavaScript閉包_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript閉包，閉包(closure)是Javascript語(yǔ)言的一個(gè)難點(diǎn),也是它的特色,很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)
2017-06-06 
這篇文章主要介紹了js簡(jiǎn)單的分頁(yè)器插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09 
Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07 
這篇文章主要為大家詳細(xì)介紹了JS猜數(shù)字游戲?qū)嵗?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06 
下面小編就為大家?guī)?lái)一篇淺談js中的引用和復(fù)制(傳值和傳址)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09