用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 ...
随机推荐
- spring框架(3)— spring集合类的注入
1.Car.java package com.eniac.beans; public class Car { private String type; private String factory; ...
- C语言文法翻译
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
- Hbase的安装和配置
1,准备好hbase的linux环境下的压缩包,这里hadoop版本为hadoop2.5.0,hbase版本为 2,解压缩这个版本,不选src的,其实两个任一都行 进入到hbase安装包目录,我这里的 ...
- 【BioCode】读文件夹以发现缺失文件
代码说明: 使用单个蛋白质的txt计算PSSM生成的结果为单个的PSSM文件. 但是由于一些原因(如蛋白质序列过长),会导致一些蛋白质txt文件无法计算出pssm,为了找到这些没有计算出pssm的蛋白 ...
- HDU 2105 The Center of Gravity
http://acm.hdu.edu.cn/showproblem.php?pid=2105 Problem Description Everyone know the story that how ...
- 太平洋网络ip地址查询接口使用,返回json格式,默认返回jsonp
http://whois.pconline.com.cn/ipJson.jsp?json=true
- idea tomcat debug 失效
idea 开发神器 有时候遇到各种问题 这不 现在遇到了一个问题 启动容器时 debug断点不能进入 在网上找了老半天 终于找到答案了 原因是使用tomcat的时候 没有选择"pass en ...
- 开源人脸识别face_recognition
环境:python36 1.安装dlib.face_recognition windows版 下载dlib,cp后面是py版本 下载地址:https://pypi.org/simple/dlib/ 提 ...
- RPC和WebService的区别
最近分析的这个系统,逻辑架构中有一层是RPC interface.之前对RPC不熟悉,就上网搜索了一下资料,在此总结一下: RPC是Remote Procedure Calling,远程过程调用的缩写 ...
- 数据库引擎InnoDB和MyISAM区别
MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...