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

<!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. tomcat启动时,报java.io.EOFException

    在启动Tomcat的时候突然报出IO异常,具体异常如下图 在网上找了解决方法,测试了好几种,都不行,到最后看了一个博客解决了,在此记录一下. 百度了下,网上都是说去Tomcat目录下:将tomcat5 ...

  2. P4语法（5） Package

    Package 对于package这个概念,类似于将一个框架中各组成部件以一个规律进行打包,以正常运转. 基于一个架构去编写一个新的pipeline的时候,需要先了解初始化的时候需要提供那些东西,pa ...

  3. HDU 5195 DZY Loves Topological Sorting 拓扑排序

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5195 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  4. Maya脚本——重命名物体的名称

    该脚本用于将图1中的命名变更为图2中的,把maya中使用相同名称的物体都重命名为不同的名称. 重命名的规则是:组名_原名称_序号 查阅了maya的官方手册:http://download.autode ...

  5. J2EE面试常见试题

    一.基础问答 1.下面哪些类可以被继承? java.lang.Thread (T) java.lang.Number (T) java.lang.Double (F) java.lang.Math  ...

  6. The goal you specified requires a project to execute but there is no POM in this directory

    [INFO] Scanning for projects... [INFO] ------------------------------------------------------------- ...

  7. 【转】史上最浅显易懂的Git教程！

    之前一直在找git的学习教程,网上搜到很多,但是大多数写的都非常简单或者混乱,你知道技术男的思维就是以为他抛一个专业术语出来,以为你都懂……或者简单写两句,插个图,他觉得他懂了,你也能懂,事实上初学者 ...

  8. C++解析(29)：类型识别

    0.目录 1.类型识别 2.动态类型识别 3.类型识别关键字 4.小结 1.类型识别 在面向对象中可能出现下面的情况: 基类指针指向子类对象 基类引用成为子类对象的别名 静态类型--变量(对象)自身的 ...

  9. Python常忘的进阶知识（上）

    0.目录 1.面向对象 1.1 函数与方法 1.2 类变量与实例变量 1.3 实例方法.类方法.静态方法 1.4 公开和私有:没有什么是不能访问的 1.5 继承 2.正则表达式 2.1 Python内 ...

  10. Shell脚本重启Python程序

    # restart.sh old_pid=$(ps ax|grep Service.py|grep -v grep|awk '{print $1}') echo "old_pid=${old ...