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

<!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. plsql 永久注册码

    注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca 可用

  2. 软工网络15个人作业4--alpha阶段个人总结

    一.个人总结 自我评价表 类别 具体技能和面试问题 现在的回答 毕业找工作 语言 最拿手的语言之一,代码量是多少 java,代码量大概两三千行吧 语言 最拿手的语言之二,代码量是多少 python,代 ...

  3. 【BioCode】读文件夹以发现缺失文件

    代码说明: 使用单个蛋白质的txt计算PSSM生成的结果为单个的PSSM文件. 但是由于一些原因(如蛋白质序列过长),会导致一些蛋白质txt文件无法计算出pssm,为了找到这些没有计算出pssm的蛋白 ...

  4. Delphi中的ADOquery 用法以及ADOquery的自有方法Append 和Delete和 Edit 和Post

    Delphi在数据库操作是非常好用的,delphi把ADO一些方法属性都集成了,以下是我的一些总结:*******************************通过sql的存储过程来实现:添加Wit ...

  5. BZOJ 2039 人员雇佣(最小割)

    最小割的建图模式一般是,先算出总收益,然后再通过网络模型进行割边减去部分权值. 然后我们需要思考什么才能带来收益,什么才能有权值冲突. s连向选的点,t连向不选的点,那么收益的减少量应该就是将s集和t ...

  6. 【开发工具IDE】解决IntelliJ IDEA 创建Maven项目速度慢的问题

    方法一(推荐) 在创建Maven项目时加上 archetypeCatalog=internal 参数,如下: 方法二 在maven的VM Options加上-DarchetypeCatalog=int ...

  7. 题解 P1469 【找筷子】

    这题真是水 咳咳.. 基本思路:桶排 但是可以剪枝. 剪枝方法: 好几种,可以用set(集合),可以用stack(栈), 也可以像我一样的蒟蒻最大最小值...... 但是作者的毒瘤数据应该不会放过我们 ...

  8. Find the hotel HDU - 3193(RMQ)

    题意: 有n个旅馆,从这n个旅馆中找出若干个旅馆,使得这若干个旅馆满足这样的条件:不能从其它和剩下的旅馆中找到一个价格和距离都小于这个旅馆的旅馆... 解析: 按price 排序,若price相同, ...

  9. [BZOJ4103][Thu Summer Camp 2015]异或运算 可持久化Trie树

    4103: [Thu Summer Camp 2015]异或运算 Time Limit: 20 Sec  Memory Limit: 512 MB Description 给定长度为n的数列X={x1 ...

  10. 【BZOJ4361】isn（动态规划，容斥）

    [BZOJ4361]isn(动态规划,容斥) 题面 BZOJ 题解 首先我们如果确定了一个不降序列,假设它的长度为\(i\), 那么可行的方案数为\(i*(n-i)!\),但是这样有一些非法的情况,即 ...