您的位置:首页 > Web前端 > JavaScript

《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视频教程》
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: