我们使用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></div> <div></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); }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》