很简单的代码，不多解释，一看就懂。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

    #div1{width:50px; height:50px; background:red;}

    #div2{width:200px; height:150px; background:grey; display:none;}

</style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <script>

        window.onload = function(){

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

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

            var timer = null;

            div1.onmouseover = function(){

                clearTimeout(timer);

                timer = setTimeout(function(){

                    div2.style.display = "block";

                },500);

            };

            div1.onmouseout = function(){

                timer = setTimeout(function(){

                    div2.style.display = "none";

                },500);

            };

            div2.onmouseover = function(){

                clearTimeout(timer);

                timer = setTimeout(function(){

                    div2.style.display = "block";

                },500);

            };

            div2.onmouseout = function(){

                timer = setTimeout(function(){

                    div2.style.display = "none";

                },500);

            };

        };

    </script>

</body>

</html>

用setTimeout模拟QQ延时提示框的更多相关文章

  1. 延时提示框制作思路[简单javascript案例]

    模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...

  2. wpf实现仿qq消息提示框

    原文:wpf实现仿qq消息提示框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...

  3. JS延时提示框

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  4. JS定时器的使用--延时提示框

    <title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...

  5. JavaScript实现延时提示框

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  6. JS学习笔记 -- 定时器，提示框的应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  8. qt之透明提示框（模拟qq） （非常漂亮）

    Qt实现类似QQ的登录失败的提示框,主要涉及窗口透明并添加关闭按钮,以及图标和信息的显示等. 直接上代码: #include "error_widget.h" ErrorWidge ...

  9. 闲扯 Javascript 03 时钟和QQ延时框

    时钟 : 所用到得图片  : 开启定时器 setInterval  间隔型 setTimeout  延时型 停止定时器 clearInterval clearTimeout 效果思路 获取系统时间 D ...

随机推荐

  1. 读<<我是IT小小鸟>>

    <倔强><怒放的生命>以歌曲的含义来引入文章,让文章可以与音乐产生共鸣让读者可以直接明了的就直击到本篇文章的中心含义是非常受用的,在文中写了许多以自己为视角,以自己的成长经历来 ...

  2. vue知识拓展

    组件 *组件里面如果要放数据:        data必须是函数的形式,函数必须返回一个对象(json),有的时候我们自己创建的组件需要使用到自己的数据,此外组建中也可以放入自己的其他的比如事件之类的 ...

  3. "Scrum站立会议"浅析

    目录 Scrum Scrum Meeting功能及要点 Scrum Meeting点评 Scrum 定义:是一种软件开发流程.它并不是一项技术,这种开发方式的主要驱动核心是人,它采用的是迭代式开发. ...

  4. TeamCity编译执行selenium上传窗口脚本缺陷

    2015-07-04 18:05 编写本文 TeamCity编译selenium脚本,对于上传窗口处理只支持sendKeys的使用,不支持模拟人为按下Enter键和使用autoIt等操作,即使本地调试 ...

  5. delphi self 的使用

    delphi之self 在使用delphi的对象技术的时候,经常会看到一个词汇:self,它到底指的是什么呢? 我们还要从对象与类的关系谈起. 类是对将要创建的对象的性质的描述,是一种文档.这很重要: ...

  6. 学习websocket-SignalR，MVC中使用SignalR打造酷炫实用的即时通讯

    http://www.cnblogs.com/Leo_wl/p/4793284.html http://www.fangsi.net/archives/1144.html

  7. noip模拟题《迷》enc

    [问题背景]zhx 和他的妹子聊天.[问题描述]     考虑一种简单的加密算法.     假定所有句子都由小写英文字母构成, 对于每一个字母, 我们将它唯一地映射到另一个字母.例如考虑映射规则:a- ...

  8. 【明哥报错簿】之【inside the host appBase has been specified, and will be ignored】和【did not find a matching property.】

    tomcat启动时有时候会报一些警告,项目有时候也是可以正常运行.但是警告出现还是要找到原因消灭掉,两个典型的警告解决办法如下: 1.[inside the host appBase has been ...

  9. MySQL配置文件简单解析

    [mysqld] basedir = /data/mysql datadir = /data/mysqldata tmpdir = /data/mysqltmpdata //mysql的查询临时目录, ...

  10. macvtap介绍

    macvtap介绍 传统的linux网络虚拟化技术采用的是tap+bridge方式,将虚拟机连接到虚拟的tap网卡,然后将tap网卡加入到bridge.bridge相当于用软件实现的交换机,这种解决方 ...