用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 ...
随机推荐
- postion一句话很管用
relative和absolute有本质区别,relative是相对与postion为默认值的时候元素自身位置来定位:而absolute是相对最近position为relative或absolute的 ...
- Hash开散列 拉链法
#include<iostream> #include<cstdio> using namespace std; const int maxn=1000007; struct ...
- C#高级编程 (第六版) 学习 第三章：对象和类型
第三章 对象和类型 1,类和结构 类存储在托管堆上 结构存储在堆栈上 2,类成员 类中的数据和函数称为类成员 数据成员 数据成员包括了字段.常量和事件 函数成员 方法:与某个类相关的函数,可以 ...
- javascript 常用知识点
1:浏览器是有缓存的,开发中可以通过快捷键绕过缓存 对于Windows驱动的系统:Ctrl + F5 对于Mac驱动的系统:Command + Shift + R. 2:精度问题 (符点和大数字可能会 ...
- android studio 运行太慢了
Android Studio每次升级/安装 Android Studio 之后最好都修改一下这个参数:到 Android Studio 安装目录,找到 bin/studio(64?).vmoption ...
- （转）REST无状态的理解
转至http://lelglin.iteye.com/blog/1852092 Representational State Transfer的缩写.我对这个词组的翻译是"表现层状态转化&q ...
- BZOJ4887 Tjoi2017可乐（动态规划+矩阵快速幂）
设f[i][j]为第i天到达j号城市的方案数,转移显然,答案即为每天在每个点的方案数之和.矩乘一发即可. #include<iostream> #include<cstdio> ...
- Shortest Prefixes POJ - 2001（统计次数）
题意: 输出每个单词的缩写 使得每个单词 互不相同.. 解析: 统计每个前出现的次数...然后在查询的时候 遇到次数为1的返回即可.. #include <iostream> #inc ...
- 洛谷 P3723 [AH2017/HNOI2017]礼物 解题报告
P3723 [AH2017/HNOI2017]礼物 题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 \(n\) 个 ...
- bzoj1426: 收集邮票（期望）
推错半天式子T T 设f[i]为买了i种卡,期望再买几张有n种卡 设g[i]为买了i种卡,期望再花多少钱有n种卡 可以把当前买卡的价格看作1,则以后买的所有卡片要增加1元,于是要加上f[i]和f[i+ ...