在qq主页面板上的最上方有自己的用户名，往用户名上移动会出现一个大框，往大框中移动，大框不会消失，如果离开大框或者姓名，大框就会消失，这一功能用到display：none的效果还有就是计时器的延时功能，用到onmoseover；

onmouseover 属性在鼠标指针移动到元素上时触发。

注释：onmouseover 属性不适用以下元 素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

onmoseover的相反是onmouseout；

且看如下代码：

HTML代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript二级联动</title>

    <style type="text/css">

        #block1{

            width: 40px;

            height: 40px;

            background: red;

            float: left;

        }

        #block2{

            width: 240px;

            height: 240px;

            background: gray;

            float: left;

            margin-left: 5px;

        }

    </style>

</head>

<body>

<div id = "block1"></div>

<div id = "block2"></div>

</body>

</html>

javascript代码如下:

var block1 = document.getElementById("block1");

var block2 = document.getElementById("block2");

block1.onmouseover = function(){

   block2.style.display = 'block';

}

这一步实现的是将鼠标移到block1的时候block2出现；但是鼠标离开block1，block2仍然出现，我们需要将block2消失，则需要用到onmoseout来操作，如下：

block1.onmouseout = function(){

    block2.style.display = 'none';

}

但是，这个效果还是有欠缺，因为从block1移动到block2的时候无法选中block2，而是很快的消失了，那么，我们需要一个延时来让block2慢点消失，给他一个setTimeout，并且500毫秒，因为setTimeout会有一个返回值，所以在之前设置一个var timer = null;一开始timer不知道要赋值什么，所以为null，再在下面的程序中将值付给timer，如下：

block1.onmouseout = function(){

   timer = setTimeout("block2.style.display = 'none'",1000);

}

移到block2时需要block2一直显示，并且，之前block1的延时取消none这个延时的动作，所以如下代码：

block2.onmouseover = function(){

    clearTimeout(timer);

    block2.style.display = 'block';

}

那么block2移除鼠标时会怎么样呢？我们希望移除block2会消失，并且，移到block1的时候依然为显示，所以这边也需要一个延时，然后在block鼠标以上去的时候清除定时器的延时，这样block2移到block1上时不会出现消失了。如下代码

block2.onmouseout = function(){

       time = setTimeout(" block2.style.display = 'none'",1000);

}

javascript总的代码如下：

var block1 = document.getElementById("block1");

var block2 = document.getElementById("block2");

var timer = null;

block1.onmouseover = function(){

    block2.style.display = 'block';

    clearTimeout(time);

}

block1.onmouseout = function(){

   timer = setTimeout("block2.style.display = 'none'",1000);

}

block2.onmouseover = function(){

    clearTimeout(timer);

    block2.style.display = 'block';

}

block2.onmouseout = function(){

    timer = setTimeout(" block2.style.display = 'none'",1000);

}

block1.onmuseout与 block1.onmouseout一样，所以整合后为：

var block1 = document.getElementById("block1");

var block2 = document.getElementById("block2");

var timer = null;

block1.onmouseover = function(){

    block2.style.display = 'block';

    clearTimeout(time);

}

block2.onmouseout = block1.onmouseout = function(){

   timer = setTimeout("block2.style.display = 'none'",1000);

}

block2.onmouseover = function(){

    clearTimeout(timer);

    block2.style.display = 'block';

}

将javascript代码保存，在HTML中设置一个路径即可；

计时器中qq上的一个功能，延时作用的更多相关文章

  1. Element UI中的上传文件功能

    上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...

  2. python中如何单独测试一个函数的作用

    #!/usr/bin/python import os def get_env_varible(key): return os.getenv(key) if __name__ == '__main__ ...

  3. QQ上传大文件为什么这么快

    今天和同事在群里讨论“QQ上传大文件/QQ群发送大文件时,可以在极短的时间内完成”是如何做到的. 有时候我们通过QQ上传一个几百M的文件,竟然只用了几秒钟,从带宽上限制可以得出,实际上传文件是不可能的 ...

  4. 微软develop apps在QQ上部分功能的实现

    最近我对微软的develop apps的文档进行了简读,在感叹UWP在支持服务上的全面的同时,我不禁在在常用的APP上对于这些功能支持进行了部分的寻找对应.而我进行功能对照的,就是平时很常用的一款手机 ...

  5. 我需要在Web上完成一个图片上传的功能

    我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身 ...

  6. 完美实现类似QQ的自拍头像、上传头像功能！（Demo 源码）

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  7. web实现QQ头像上传截取功能

    由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...

  8. Web 项目中分享到微博、QQ空间等分享功能

    Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...

  9. 简单练习题2编写Java应用程序。首先定义一个描述银行账户的Account类，包括成员变 量“账号”和“存款余额”，成员方法有“存款”、“取款”和“余额查询”。其次， 编写一个主类，在主类中测试Account类的功能

    编写Java应用程序.首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”.“取款”和“余额查询”.其次, 编写一个主类,在主类中测试Account类的 ...

随机推荐

  1. roundcute 添加修改密码插件

    添加修改密码插件 现打开main.inc.php 文件,搜索“$rcmail_config['plugins']”,找到: // List of active plugins (in plugins/ ...

  2. 实现两个select list box间item的移动和过滤

    <head> <title> </title> <!--Standard jQuery --> <script type="text/j ...

  3. JAVA的对象和引用——一个真实遇到的问题

    最近在写一段代码的时候,不懂JAVA的我被困住了.先简单描述一下要实现的效果:我要往secretVector里塞28个byteVector,这28个byteVector分别装着10个数值,而且这28个 ...

  4. linux系统学习笔记：无死角理解保存的设置用户ID，设置用户ID位，有效用户ID，实际用户ID

    一.基本概念 实际用户ID(RUID):用于标识一个系统中用户是谁,一般是在登录之后,就被唯一的确定,就是登录的用户的uid. 有效用户ID(EUID):用于系统决定用户对系统资源的权限,也就是说当用 ...

  5. MyEclipse破解方法

    Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址 http://www.jb51.net/softs/150886.html,然后下载此补丁 ...

  6. JQ----树杈型导航

    简单的做了一个树杈型的导航结构如下所示: 废话不多说,上代码: HTML: <div class="wrapper"> <div class="tabt ...

  7. API接口测试01理论

    定义 接口测试是系统组件间及多个系统之间的测试 如:app与Server间如何进行数据交换,传递 意义 确保主要流程及系统的稳定性 将BUG控制在项目前期 缩短产品的研发周期 检查服务器的异常处理能力 ...

  8. Nginx 模块开发（1）—— 一个稍稍能说明问题模块开发 Step By Step 过程

    1. Nginx 介绍        Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,它的发音为“engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/S ...

  9. Inno Setup 创建站点，创建虚拟目录

    原文 http://hi.baidu.com/0531_sunmiles/item/ce22554ab7d33d0be9350477 下面的这段代码是用Inno Setup 做安装包的时候创建IIS新 ...

  10. 带有OUTPUT的INSERT,DELETE,UPDATE

    原文地址:http://blog.sina.com.cn/s/blog_71460d950100nld2.html OUTPUT是SQL SERVER2005的新特性.可以从数据修改语句中返回输出.可 ...