鼠标划过实现延迟加载并隐藏层的js代码

157 阅读 0 评论 104 点赞

我是靠谱客的博主花痴荷花，最近开发中收集的这篇文章主要介绍鼠标划过实现延迟加载并隐藏层的js代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

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

复制代码代码如下:

 
.layer_follow 
{ 
display:none 
} 

js:

复制代码代码如下:

 
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); 
} 
} 