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

<!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. jQuery之_元素滚动

    对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(doc ...

  2. 初学Objective - C语法之代码块（block）

    一.block声明 1.无参数,无返回值: void (^sayHi)(); 2.有参数,有返回值: NSInteger (^operateOfValue)(NSInteger num); block ...

  3. 【week10】psp

    项目 内容 开始时间 结束时间 中断时间 净时间 2016/11/19(星期六) 写博客 吉林一日游规格说明书 10:30 15:10 20 260 2016/11/20(星期日) 看论文 磷酸化+三 ...

  4. 关于java读取excle文件的相关方法 ；

    1.读取Excle文件内容的方法 拿过来可以直接用 : 2.参照 http://www.anyrt.com/blog/list/importexcel.html#6 更多知识请参考:http://ww ...

  5. sublime插件时间

    import datetime import sublime_plugin class AddCurrentTimeCommand(sublime_plugin.TextCommand): def r ...

  6. php伪静态配置

    配置虚拟主机和伪静态 1.开启Apache的rewrite模块 LoadModule rewrite_module modules/mod_rewrite.so 2.开启虚拟主机功能 # Virtua ...

  7. [C/C++] 指针数组和数组指针

    转自:http://www.cnblogs.com/Romi/archive/2012/01/10/2317898.html 这两个名字不同当然所代表的意思也就不同.我刚开始看到这就吓到了,主要是中文 ...

  8. django学习系列-01

    安装Django > pip install django==1.10.3(py2)或者>python3 -m pip install django==1.10.3(py3) 成功安装 D ...

  9. MVC中ajax提交表单示例

    页面中: @using (Ajax.BeginForm("Login", "User", new AjaxOptions() { HttpMethod = &q ...

  10. 洛谷P2894[USACO08FEB]酒店Hotel（线段树）

    问题描述 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N (1 <= N & ...