JS如何实现模仿QQ头像资料卡显示与隐藏效果

这篇文章主要介绍JS如何实现模仿QQ头像资料卡显示与隐藏效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考，具体如下：

我们使用QQ时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。

实质就是延时提示框问题！

首先写好布局：

<style>     div { float:left; margin:5px; }     .head { width:50px;height:50px;background-color:pink; }     .info { width:250px;height:200px;background-color:blue;display:none; } </style> <div>   <div class="head"></div>   <div class="info"></div> </div>

其次js部分：

思路：

（1）鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏setTimeout
（2）鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量
（3）鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量

window.onload =function(){     var oHead = document.getElementsByClassName("head")[0];     var oInfo = document.getElementsByClassName("info")[0];     var timer = null;     oHead.onmouseover=function(){       clearTimeout(timer);       oInfo.style.display="block";     };     oHead.onmouseout=function(){       timer = setTimeout(function(){         oInfo.style.display="none";       },500);     };     oInfo.onmouseover=function(){       clearTimeout(timer);       oInfo.style.display="block";     };     oInfo.onmouseout=function(){       timer = setTimeout(function(){         oInfo.style.display="none";       },500);     }; };

优化代码：

oInfo.onmouseover = oHead.onmouseover=function(){   clearTimeout(timer);   oInfo.style.display="block"; }; oInfo.onmouseout = oHead.onmouseout=function(){   timer = setTimeout(function(){     oInfo.style.display="none";   },500); };

函数封装：

注意：事件 .xx 等于 [“xx”]

第一种：函数外获取变量，调用函数，适用于一个或两个元素调用此事件

window.onload =function(){   var oHead = document.getElementsByClassName("head")[0];   var oInfo = document.getElementsByClassName("info")[0];   reminder(oHead,oInfo,"onmouseover","onmouseout");   function reminder (div1,div2,event1,event2){     var timer = null;     div1[event1] = div2[event1]=function(){      clearTimeout(timer);      div2.style.display="block";     };     div1[event2] = div2[event2]=function(){      timer = setTimeout(function(){       div2.style.display="none";      },500);     };   } };

第二种：函数外获取变量，调用函数，适用于多个元素调用此事件

window.onload =function(){   var number=0;   reminder("head","info","onmouseover","onmouseout",number);   function reminder (div1,div2,event1,event2,num){     var oHead = document.getElementsByClassName(div1)[num];     var oInfo = document.getElementsByClassName(div2)[num];     var timer = null;     oHead[event1] = oInfo[event1]=function(){      clearTimeout(timer);      oInfo.style.display="block";     };     oHead[event2] = oInfo[event2]=function(){      timer = setTimeout(function(){       oInfo.style.display="none";      },500);     };   } };

比如，一共有三个头像的话，就可以用for循环遍历为每个元素绑定事件：

var number=null; for(number=0;number<3;number++){    reminder("head","info","onmouseover","onmouseout",number); }

以上是“JS如何实现模仿QQ头像资料卡显示与隐藏效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！