《JavaScript学习笔记九》:延时框的实现
2016-05-30 20:20
507 查看
《JavaScript学习笔记九》:延时框的实现
延时框在我们的生活中也随处可见,例如,在QQ中,当我们将鼠标放在我们的头像上时,则会出现左边这个页面,当我们鼠标离开时,左边这个界面过一段时间才会隐藏,这就是延时框。下面我们就来模拟这样一个功能。这个功能由如下的小功能组成,假设有如下两个块(A、B)
1、当鼠标移入到块A上时,则块B显示
2、当鼠标移出块A上且没有移入块B上时,则块B延时一会就隐藏
3、当鼠标移出块A上且移入到了块B上时,则块B不隐藏,显示
4、当鼠标移出块B且没有移入到块A上时,则块B延时一会就隐藏
5、当鼠标移出块B且移入到块A上时,则块B显示。
下面就是根据上面的思路实现的具体代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> div { float:left;margin:10px;} #div1 {width:50px;height:50px;background:red;} #div2 {width:200px;height:100px;background:black;display:none} </style> <script> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer; oDiv1.onmouseover=function () { clearTimeout(timer); oDiv2.style.display='block';//当鼠标移入到oDiv1中时 }; oDiv1.onmouseout=function () { //当鼠标从Div1中离开时,Div2延时1000毫秒才隐藏 timer=setTimeout(function() { oDiv2.style.display='none'; },1000); }; //当鼠标移入div2上时,显示,不隐藏,并关掉oDiv1上的定时器 oDiv2.onmouseover=function() { clearTimeout(timer); this.style.display='block'; }; //当离开Div2时,则隐藏,如果是离开Div2到div1,则就不隐藏 oDiv2.onmouseout=function() { timer=setTimeout(function() { oDiv2.style.display='none'; },1000); }; } </script> </head> <body> <div id="div1" > </div> <div id="div2"> </div> </body> </html>
从上面的代码可以看出,有很多代码是一样的,隐藏可以将函数进行合并,合并后的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> div { float:left;margin:10px;} #div1 {width:50px;height:50px;background:red;} #div2 {width:200px;height:100px;background:black;display:none} </style> <script> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer; oDiv1.onmouseover=oDiv2.onmouseover=function () { clearTimeout(timer); oDiv2.style.display='block';//当鼠标移入到oDiv1中时 }; oDiv1.onmouseout=oDiv2.onmouseout=function () { //当鼠标从Div1中离开时,Div2延时1000毫秒才隐藏 timer=setTimeout(function() { oDiv2.style.display='none'; },1000); }; } </script> </head> <body> <div id="div1" > </div> <div id="div2"> </div> </body> </html>
以上就是延时框的实现。
参考资料
1、blue老师的《js视频教程》相关文章推荐
- 《JavaScript学习笔记八》:数字时钟的实现
- 轻量级图形报表工具JSCharts (JSChart),内置函数中文参考
- 《JavaScript学习笔记七》:数组和可变参数arguments的介绍
- 《JavaScript学习笔记六》:取非行间样式
- json对象与json字符串的相互转换
- JavaScript学习笔记03
- [JavaScript] 11.JS 偶识【正则表达式】[2]
- [JavaScript] 10.JS 表单操作
- javaScript 工作必知(八) 属性的特性 值、写、枚举、可配置
- Javascript 判断对象是否相等。
- [JavaScript] 9.JS DOM模型
- [RxJS] Transformation operators: debounce and debounceTime
- [JavaScript] 8.JS BOM对象
- JSESSIONID与SESSION
- JSESSIONID与SESSION
- js 验证表单 js提交验证类
- JavaScript中的setInterval用法
- [JavaScript] 7.JS JSON
- JavaScript+Java实现HTML页面转为PDF文件保存的方法
- JavaScript学习笔记02