鼠標劃過實現(xiàn)延遲加載并隱藏層的js代碼
更新時間：2013年10月11日 16:51:32 作者：
鼠標劃過延遲加載隱藏層的效果，想必大家都有見到過吧，在本文將為大家詳細介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<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)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)新建文件夾功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
js實現(xiàn)繼承的方法及優(yōu)缺點總結(jié)
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)繼承的方法及優(yōu)缺點的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題
這篇文章主要介紹了webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細介紹了javascript滾輪事件基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript 動態(tài)創(chuàng)建VML的方法
JavaScript 動態(tài)創(chuàng)建VML的方法，需要的朋友可以參考下。2009-10-10
這篇文章主要介紹了CORS與預(yù)檢請求，CORS是一套規(guī)范，指導(dǎo)瀏覽器和服務(wù)器之間如何進行跨域資源共享，當(dāng)發(fā)送跨域請求時，瀏覽器會先發(fā)送一個OPTIONS方法的預(yù)檢請求。文中介紹的非常詳細，需要的同學(xué)可以參考一下2023-04-04
JavaScript事件代理（委托）一般用于以下情況：1. 事件注冊在祖先級元素上，代理其子級元素。可以減少事件注冊數(shù)量，節(jié)約內(nèi)存開銷，提高性能。2. 對js動態(tài)添加的子元素可自動綁定事件。本文主要介紹用原生 js 實現(xiàn)該功能。下面跟著小編一起來看下吧2016-12-12
js去空格想必大家多少都會點吧，在接下來的文章中為大家詳細介紹下如何分別去字符串前后，左邊，右邊空格，感興趣的朋友可以參考下2013-10-10
這篇文章主要給大家介紹了關(guān)于原生js中運算符及流程控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04