鼠标划过延迟加载隐藏层的效果,想必大家都有见到过吧,在本文将为大家详细介绍下使用 js 是如何实现的,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <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);
- }
- }
来源: