js模仿QQ头像资料卡显示与隐藏

来源：互联网发布：启示录知乎编辑：程序博客网时间：2024/06/08 14:42

我们使用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);        }

0 0