鼠標劃過實現(xiàn)延遲加載并隱藏層的js代碼

更新時間：2013年10月11日 16:51:32 作者：

鼠標劃過延遲加載隱藏層的效果，想必大家都有見到過吧，在本文將為大家詳細介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下

 
<div id="follow"> 
<a href="#" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();" class="btn">+Follow</a> 
<div class="layer_follow" id="layer_follow" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();"> 
<p>這是隱藏層</p> 
</div> 
</div> 

css:

復(fù)制代碼代碼如下:

 
.layer_follow 
{ 
display:none 
} 

js:

復(fù)制代碼代碼如下:

 
var isPlusMobileVisible=false; 
var showTid; 
var hideTid; 
function showPlusMobile(){ 
if(isPlusMobileVisible == false) { 
showTid = setTimeout("document.getElementById('layer_follow').style.display='block'; isPlusMobileVisible=true;", 500); 
}else{ 
clearTimeout(hideTid); 
} 
} 
function hidePlusMobile(){ 
if(isPlusMobileVisible == true) { 
hideTid = setTimeout("document.getElementById('layer_follow').style.display='none'; isPlusMobileVisible=false;", 500); 
}else { 
clearTimeout(showTid); 
} 
} 

您可能感興趣的文章:

相關(guān)文章

用nodejs實現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下
2014-03-03
原生js與jQuery實現(xiàn)簡單的tab切換特效對比
這篇文章主要通過原生js與jQuery實現(xiàn)簡單的tab切換特效對比介紹了js與jQuery之間的區(qū)別，有需要的小伙伴可以參考下。
2015-07-07
給easyui datebox擴展一個清空的實例
下面小編就為大家?guī)硪黄oeasyui datebox擴展一個清空按鈕的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
簡單談?wù)刯s的數(shù)據(jù)類型
下面小編就為大家?guī)硪黄唵握務(wù)刯s的數(shù)據(jù)類型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
實例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。JSON采用完全獨立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言
2016-01-01
javascript實現(xiàn)點亮燈泡特效示例
這篇文章主要介紹了javascript實現(xiàn)點亮燈泡特效示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
Move.js入門
本文主要介紹了Move.js基礎(chǔ)知識和Move.js的方法。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
JavaScript中兩個感嘆號的作用說明
用兩個感嘆號的作用就在于，如果明確設(shè)置了o中flag的值（非null/undefined/0""/等值），自然test就會取跟o.flag一樣的值；如果沒有設(shè)置，test就會默認為false，而不是null或undefined
2011-12-12
分享JavaScript?中的幾種繼承方式
這篇文章主要介紹了分享JavaScript?中的幾種繼承方式，JavaScript中的繼承主要是通過原型鏈實現(xiàn)的，具體實現(xiàn)需要的小伙伴可以參考下面文章詳細內(nèi)容
2022-05-05
uniapp?動態(tài)組件實現(xiàn)Tabs標簽切換組件(喜馬拉雅app作為案例)
本文以喜馬拉雅app作為案例給大家詳解講解uniapp?動態(tài)組件實現(xiàn)Tabs標簽切換組件功能,在uniapp中實現(xiàn)動態(tài)組件切換需看uniapp是否支持,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-10-10