JS延时提示框

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

#div1 {

height: 100px;

width: 100px;

background-color: red;

}

#div2 {

height: 300px;

width: 300px;

background-color: gray;

display: none;

}

div {

margin: 10px;

float: left;

}

</style>

</head>

<body>

</body>

//当鼠标移出div1的时候，提示框不立刻消失，延时消失

//当鼠标移入提示框时候，提示框始终保持显示状态，

//当鼠标移出提示框时候，提示框延时消失

var sDiv = document.getElementById("div1");

var bDiv = document.getElementById("div2");

var timer = null;

// sDiv.onmouseover=function(){

// clearTimeout(timer);

// bDiv.style.display="block";

// }

// sDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000);

// }

// bDiv.onmouseover=function(){

// clearTimeout(timer);

// }

// bDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000)

// }

//函数合并,上面是未合并之前的详细代码

div1.onmouseover = div2.onmouseover = function() {

clearTimeout(timer);

div2.style.display = "block";

}

div1.onmouseout = div2.onmouseout = function() {

timer = setTimeout(function() {

div2.style.display = "none";

}, 3000)

}

</script>

</html>

JS延时提示框的更多相关文章

延时提示框制作思路[简单javascript案例]
模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...
Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）
1.Oracle在已经存在主键的表中插入复合主键的SQL语句如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...
js中提示框闪退问题
当页面存在刷新或在线引用iframe框架时(引用框架也会导致刷新) 会导致页面加载时的弹出框闪退解决方法:设置弹出框在页面或者框架完全加载一段时间后再弹出 <script type=& ...
JS定时器的使用--延时提示框
<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...
js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
用setTimeout模拟QQ延时提示框
很简单的代码,不多解释,一看就懂. <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
JavaScript实现延时提示框
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
JS鼠标提示框效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

使用Atlas实现MySQL读写分离
1.MySQL所在机器 192.168.29.128(Master) 192.168.29.129(Slave) 配置好主从同步,参考 http://www.cnblogs.com/luxh/p/40 ...
Biological Filtration
http://www.fishyou.com/filtration-biological.php Biological Filtration Biological filtration is the ...
Linux zip/unzip命令
From: http://www.ixdba.net/a/os/linux/2010/0725/359.html From: http://www.cnblogs.com/chinareny2k/ar ...
Android Studio JNI/NDK 编程（二） Windows 下环境搭建 demo 开发
环境 windows 8 (注:其实 Linux 开发可能更方便) Android Studio 2.1; 一 . 下载安装android-ndk开发包地址:链接:http://pan.baid ...
jquery 点击事件
bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触 ...
C#通过安全证书生成签名和验签辅助类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...
zedboard如何从PL端控制DDR读写(五)
有了前面的一堆铺垫.现在终于开始正式准备读写DDR了,开发环境:VIVADO2014.2 + SDK. 一.首先要想在PL端通过AXI去控制DDR,我们必须要有一个AXI master,由于是测试,就 ...
NK3C 业务权限控制
资源中,添加了一个类型:权限(橙色显示),现在有4种数据: 域管理员:domainAdmin 组织管理员:orgAdmin 组管理员:groupAdmin 一线员工:phoneAdmin 权限控制可以 ...
JavaScript 对象之继承对象学习笔记
假设,我们有个这样的需求: 两个种族,每个种族都有名字.血量(默认200).行为(行为有跳跃.移动速度这些属性)等共有属性. 人族能量值比兽人多10%,兽人血量比人族多10%. 职业有战士和法师 ...
Hadoop MapReduce编程 API入门系列之薪水统计（三十一）
不多说,直接上代码. 代码 package zhouls.bigdata.myMapReduce.SalaryCount; import java.io.IOException; import jav ...

JS延时提示框

JS延时提示框的更多相关文章

随机推荐

热门专题