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

286 阅读 0 评论 189 点赞

我是靠谱客的博主花痴荷花，这篇文章主要介绍鼠标划过实现延迟加载并隐藏层的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); 
} 
} 