《JavaScript学习笔记九》：延时框的实现

来源：互联网发布：java体系结构图编辑：程序博客网时间：2024/06/11 21:20

《JavaScript学习笔记九》：延时框的实现

延时框在我们的生活中也随处可见，例如，在QQ中，当我们将鼠标放在我们的头像上时，则会出现左边这个页面，当我们鼠标离开时，左边这个界面过一段时间才会隐藏，这就是延时框。下面我们就来模拟这样一个功能。

这个功能由如下的小功能组成，假设有如下两个块（A、B）

1、当鼠标移入到块A上时，则块B显示

2、当鼠标移出块A上且没有移入块B上时，则块B延时一会就隐藏

3、当鼠标移出块A上且移入到了块B上时，则块B不隐藏，显示

4、当鼠标移出块B且没有移入到块A上时，则块B延时一会就隐藏

5、当鼠标移出块B且移入到块A上时，则块B显示。

下面就是根据上面的思路实现的具体代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    <style>    div { float:left;margin:10px;}    #div1 {width:50px;height:50px;background:red;}    #div2 {width:200px;height:100px;background:black;display:none}    </style>    <script>    window.onload=function()    {        var oDiv1=document.getElementById('div1');        var oDiv2=document.getElementById('div2');        var timer;        oDiv1.onmouseover=function ()        {            clearTimeout(timer);            oDiv2.style.display='block';//当鼠标移入到oDiv1中时        };        oDiv1.onmouseout=function ()        {            //当鼠标从Div1中离开时，Div2延时1000毫秒才隐藏            timer=setTimeout(function()              {                oDiv2.style.display='none';            },1000);        };        //当鼠标移入div2上时，显示，不隐藏，并关掉oDiv1上的定时器        oDiv2.onmouseover=function()        {            clearTimeout(timer);            this.style.display='block';        };        //当离开Div2时，则隐藏，如果是离开Div2到div1,则就不隐藏        oDiv2.onmouseout=function()        {            timer=setTimeout(function()            {                oDiv2.style.display='none';            },1000);        };    }    </script>    </head>    <body>    <div id="div1" >    </div>    <div id="div2">    </div>    </body>    </html>

从上面的代码可以看出，有很多代码是一样的，隐藏可以将函数进行合并，合并后的代码如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    <style>    div { float:left;margin:10px;}    #div1 {width:50px;height:50px;background:red;}    #div2 {width:200px;height:100px;background:black;display:none}    </style>    <script>    window.onload=function()    {        var oDiv1=document.getElementById('div1');        var oDiv2=document.getElementById('div2');        var timer;        oDiv1.onmouseover=oDiv2.onmouseover=function ()        {            clearTimeout(timer);            oDiv2.style.display='block';//当鼠标移入到oDiv1中时        };        oDiv1.onmouseout=oDiv2.onmouseout=function ()        {            //当鼠标从Div1中离开时，Div2延时1000毫秒才隐藏            timer=setTimeout(function()              {                oDiv2.style.display='none';            },1000);        };    }    </script>    </head>    <body>    <div id="div1" >    </div>    <div id="div2">    </div>    </body>    </html>

以上就是延时框的实现。

参考资料

1、blue老师的《js视频教程》

0 0