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

最新推荐文章于 2024-05-05 21:10:47 发布

HelloWorld_EE

最新推荐文章于 2024-05-05 21:10:47 发布

阅读量428

点赞数

分类专栏： javascript 文章标签： javascript 延时框

本文链接：https://blog.csdn.net/u010412719/article/details/51540780

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

《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视频教程》

HelloWorld_EE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记九》：延时框的实现

《JavaScript学习笔记九》：延时框的实现延时框在我们的生活中也随处可见，例如，在QQ中，当我们将鼠标放在我们的头像上时，则会出现左边这个页面，当我们鼠标离开时，左边这个界面过一段时间才会隐藏，这就是延时框。下面我们就来模拟这样一个功能。这个功能由如下的小功能组成，假设有如下两个块（A、B） 1、当鼠标移入到块A上时，则块B显示2、当鼠标移出块A上且没有移入块B上时，则块B延时一会就隐藏3、
复制链接

扫一扫

专栏目录