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

<!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. 软工1816 · 第八次作业（课堂实战）- 项目UML设计（团队）

    本次作业博客 团队信息 队名:起床一起肝活队 原组长: 白晨曦(101) 原组员: 李麒 (123) 陈德斌(104) 何裕捷(214) 黄培鑫(217) 王焕仁(233) 林志华(128) 乐忠豪( ...

  2. （打补丁 ）patch

    前言: diff:逐行比较文件的不同,并且显示出来. patch: 打补丁工具,将补丁打到老文件里面,也就是diff左边的那个文件,使得老文件和新文件一样 格式:diff [选项] 老文件 新文件 格 ...

  3. mysql中事务

    事务控制语言 什么叫做“事务”: 想象一个场景: 小明给小花 汇款 5000元 买 IPHONE,操作界面不用管,不管什么操作界面,最终都要落实到这样两条语句的执行: update  存款表  set ...

  4. APDU命令与响应格式【转】

    本文转载自:http://map.im/apduintroduce 命令格式 APDU命令由命令头和命令体组成: CLA | INS | P1 | P2 | Lc | DATA | Le命令头: CL ...

  5. 我的 MyBatis 实现的 Dao 层

    学了 Mybatis 之后,发现用 Mybatis 写 Dao层实在是简便多了,主要是在表的映射这块简单了很多.下面是我实现的使用 Mybatis 实现的简单的操作用户表的 Dao 层. 使用 Myb ...

  6. vscode如何用浏览器预览运行html文件

    1,打开vscode编辑器,点击编辑器主界面左上侧第五个小图标——‘扩展’按钮: 2,进入扩展搜索右拉框,在应用商店搜索框中输入“view in browser”会自动进行搜索 3,等待几秒钟时间,扩 ...

  7. linux下sublime text 3安装到配置

    1. Sublime Text 3的下载安装 到官方网站上http://www.sublimetext.com/3下载64位(系统位64位)的.deb安装包(http://c758482.r82.cf ...

  8. 第196天：js---调用函数的五种方式

    一.普通方式 /*普通模式*/ // 声明一个函数,并调用 function func() { console.log("Hello World"); } func(); 二.函数 ...

  9. Qt中父子widget的事件传递

    以前我一直以为:在父widget上摆一个子widget后,当click子widget时:只会进入到子widget的相关事件处理函数中,比如进入到mousePressEvent()中, 而不会进入到父w ...

  10. BZOJ 2007 海拔(平面图最小割转对偶图最短路)

    首先注意到,把一个点的海拔定为>1的数是毫无意义的.实际上,可以转化为把这些点的海拔要么定为0,要么定为1. 其次,如果一个点周围的点的海拔没有和它相同的,那么这个点的海拔也是可以优化的,即把这 ...