其次
js部分
：
思路：
（1）鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏setTimeout
（2）鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量
（3）鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量
.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
);
};
oInf
o.onmouseover=function()
{
clearTimeout(timer
);
oInfo.style.display="block";
};
oInf
o.onmouseout=function()
{
timer = setTimeout(function()
{
oInfo.style.display="none";
},500
);
};
};
优化代码：
o.onmouseover = oHead
.onmouseover=function()
{
clearTimeout(timer
);
oInfo.style.display="block";
};
oInf
o.onmouseout = oHead
.onmouseout=function()
{
timer = setTimeout(function()
{
oInfo.style.display="none";
},500
);
};
函数封装：
注意：事件 .xx 等于 [“xx”]
第一种：函数外获取变量，调用函数，适用于一个或两个元素调用此事件
.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
);
};
}
};
第二种：函数外获取变量，调用函数，适用于多个元素调用此事件
.onload =function()
{
var
number
=0;
reminder("head","info","onmouseout",
number
);
function reminder (div1,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循环遍历为每个元素绑定事件：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
大佬总结
以上是大佬教程为你收集整理的JS实现的模仿QQ头像资料卡显示与隐藏效果全部内容，希望文章能够帮你解决JS实现的模仿QQ头像资料卡显示与隐藏效果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
