本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考，具体如下：
我们使用QQ时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。
实质就是延时提示框问题！
首先写好
布局
：rush:xhtml;">
其次
js部分
：思路：
（1）鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏setTimeout （2）鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量 （3）鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量
rush:js;">
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);
};
};
优化代码：
rush:js;">
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”]
第一种：函数外获取变量，调用函数，适用于一个或两个元素调用此事件
rush:js;">
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);
};
}
};
rush:js;">
window.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循环遍历为每个元素绑定事件：
rush:js;">
var number=null;
for(number=0;number<3;number++){
reminder("head",number);
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
