（19）延时提示框--模仿QQ鼠标移进头像的时候会显示相应的资料过程

来源：互联网发布：网络作家花千骨作者编辑：程序博客网时间：2024/06/01 15:41

当鼠标移到头像的时候会显示出相应的内容，但是如果鼠标移出之后就会隐藏相应的内容，整个过程跟用鼠标指向QQ头像的过程一样，下面是简单的程序实现：

<!DOCTYPE HTML><!----><html><head><meta charset="utf-8"><title></title><style type="text/css">div{   float:left;   margin-left: 10px;}#div1{width: 50px;height: 50px;background: red;}#div2{width:250px;height: 250px;background: #ccc; display: none;}</style><script type="text/javascript">window.onload=function(){var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var timer=null;oDiv2.onmouseover=oDiv1.onmouseover=function(){clearTimeout(timer);oDiv2.style.display='block';};oDiv2.onmouseout=oDiv1.onmouseout=function(){timer=setTimeout(function(){oDiv2.style.display='none';},500);};};</script></head><body><div id="div1" ></div><div id="div2"></div></body></html>

效果图如下：

①当鼠标没有移动到红色区域时候显示如下：

②当鼠标移动到红色区域当中的时候就会出现一个灰色的方框，犹如鼠标移动到QQ头像的时候显示相应的个人信息资料一样：

③当鼠标移出灰色区域的时候就会隐藏灰色方框，但是会延迟半秒，因为设置了一个定时器，半秒之后触发一次

其他效果：

当鼠标在红色区域范围内移动的时候就会显示相应的灰色区域内容。

当鼠标移出红色区域范围的时候就会将灰色区域中的内容隐藏起来。

当鼠标在灰色范围内移动的时候就会保持灰色区域继续显示，鼠标移出灰色区域之后就会隐藏起来。

0 0