关闭

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

标签: javascript延时框
272人阅读 评论(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视频教程》

0
0
查看评论

JavaScript的前生今世

JavaScript的历史就是一部关于屌丝逆袭的小说。 第一章 屌丝借势登上历史舞台——炙手可热20世纪90年代,Web日益流行的同时,人们对客户端脚本语言的需求也越来越强烈。那个时候,绝大多数因特网用户都使用速度仅为28.8kbit/s的“猫”(调制解调器)上网,但网页的大小和复杂性却不断增加。为...
  • lisiur
  • lisiur
  • 2016-08-01 16:50
  • 234

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分请自行上网查找,给您带来的困扰,非常抱歉。 这篇文章的主要目的是给一些自学 以及 对 ja...
  • u012967849
  • u012967849
  • 2016-07-20 14:08
  • 1954

javascript学习笔记

第一章 一、JavaScript概述 JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性(它不允许直接访问本地硬盘) 3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)。 二、JavaScript...
  • zhoulenihao
  • zhoulenihao
  • 2013-09-04 23:04
  • 4104

js学习笔记(比较全)

什么是JavaScript? 1. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)。 2. JavaScript 通常被直接嵌入 HTML 页面。 3. JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。 特点: 1....
  • jiangzhongwei_
  • jiangzhongwei_
  • 2016-07-22 20:12
  • 604

历时三个月的反反复复测试,延云YDB版本v1.1.6正式发布

历时三个月的反反复复测试,延云YDB版本v1.1.6正式发布 一、1000多项数据比对用例,近千种SQL。 二、包括业界基准测试tpc-h,tpc-ds以及近一年积累的全部的案例SQL。 三、循环生产数据,连续20天,100并发,1000万次数据比对。 本版本release内容如下: 一、修正...
  • qq_33160722
  • qq_33160722
  • 2017-02-04 13:52
  • 874

js“弹出对话框”和“弹出窗口”详解

JS中showModalDialog 详细使用 基本介绍:           showModalDialog()       &#...
  • liguiping2000
  • liguiping2000
  • 2012-03-07 10:26
  • 3791

延云YDB基础

第二章 YDB基础 一、YDB是什么?       YDB全称延云YDB,是一个基于Hadoop分布式架构下的实时的、多维的、交互式的查询、统计、分析引擎,具有万亿数据规模下的秒级性能表现,并具备企业级的稳定可靠表现。  ...
  • weixin_37242857
  • weixin_37242857
  • 2017-02-25 20:55
  • 502

JavaScript学习笔记九:变量作用域

JavaScript教程传送门由于JavaScript的函数可以嵌套,此时,内部函数可以访问外部函数定义的变量,反过来则不行:'use strict';function foo() { var x = 1; function bar() { var y...
  • downing114
  • downing114
  • 2016-06-16 12:07
  • 196

JavaScript学习笔记九

本文根据慕课网课程《JavaScript进阶》学习整理 DOM文档对象模型DOM(Document Object Model)
  • Lovejulyer
  • Lovejulyer
  • 2016-05-09 17:53
  • 952

拓扑关系——九交模型

空间关系 中文名称 OGC标准 解释 Contains 包含 是 一个几何图形的内部完全包含了另一个几何图形的内部和边界。 CoveredBy 覆盖 否 一个几何图形被另一个几何图形所包含,并且它们的边界相交。Point和MultiPoint不支持...
  • qq_28934471
  • qq_28934471
  • 2015-06-11 08:42
  • 3390
    个人资料
    • 访问:703219次
    • 积分:12711
    • 等级:
    • 排名:第1305名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:115条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论