用setTimeout模拟QQ延时提示框
很简单的代码，不多解释，一看就懂。
<!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延时提示框的更多相关文章
- 延时提示框制作思路[简单javascript案例]
模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...
- wpf实现仿qq消息提示框
原文:wpf实现仿qq消息提示框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...
- JS延时提示框
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- JS定时器的使用--延时提示框
<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...
- JavaScript实现延时提示框
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- JS学习笔记 -- 定时器，提示框的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在echarts中自定义提示框内容
1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...
- qt之透明提示框（模拟qq） （非常漂亮）
Qt实现类似QQ的登录失败的提示框,主要涉及窗口透明并添加关闭按钮,以及图标和信息的显示等. 直接上代码: #include "error_widget.h" ErrorWidge ...
- 闲扯 Javascript 03 时钟和QQ延时框
时钟 : 所用到得图片 : 开启定时器 setInterval 间隔型 setTimeout 延时型 停止定时器 clearInterval clearTimeout 效果思路 获取系统时间 D ...
随机推荐
- ngx_http_rewrite_module（重定向）
1:指定rewrite规则 rewrite regex replacement [flag]; 什么是rewrite规则:If the specified regular expression m ...
- 1014 我的C语言文法定义与C程序推导过程
程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> < ...
- 树莓派两用优盘制作(FAT32存储+EXT树莓派系统)
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:树莓派两用优盘制作(FAT32存储+EXT树莓派系统) 本文地址:http://tec ...
- 平衡树以及AVL树
平衡树是计算机科学中的一类数据结构. 平衡树是计算机科学中的一类改进的二叉查找树.一般的二叉查找树的查询复杂度是跟目标结点到树根的距离(即深度)有关,因此当结点的深度普遍较大时,查询的均摊复杂度会上升 ...
- C# 模拟串口发送接收
一.准备虚拟串口驱动工具 创建俩个虚拟串口,如图: 二.创建两个控制台程序 模拟串口的发送接收数据 1. 接收数据,代码如下: //遍历串行端口名称数组 foreach (string port in ...
- UVA11734_Big Number of Teams will Solve This
题意很简单,本身也是个水题. 给你两个字符串,如果两个串完全相同,那么输出yes:如果两串只是空格的不同,出去空格后完全相同,那么输出Output Format Error,否则输出Wrong Ans ...
- Importing/Indexing database (MySQL or SQL Server) in Solr using Data Import Handler--转载
原文地址:https://gist.github.com/maxivak/3e3ee1fca32f3949f052 Install Solr download and install Solr fro ...
- OSPF与Vlan间通信综合实验小结与端口隔离
总结 本实验模拟实际工作环境的网络拓扑结构,至此终于理解了一部分的配置思路: 一.三层交换机连接路由器的端口配置 图中GE0/0/4应该是配置成access类型,这个时候应该是不带vlan标签的. ...
- Qt浅谈之总结(整理)
Qt浅谈之总结(整理) 来源 http://blog.csdn.net/taiyang1987912/article/details/32713781 一.简介 QT的一些知识点总结,方便以后查阅. ...
- unity3D 涂涂乐使用shader实现上色效果
unity3D 涂涂乐使用shader实现上色效果 之前我博文里面发过一个简单的通过截图方式来实现的模型上色方法,但是那个方法不合适商用,因为你需要对的很准确才可以把贴图完美截取下来,只要你手抖了一下 ...