延时提示框
今天我们来学习如何制作延时提示框。首先呢，我们先来看一下QQ的效果。
QQ
我们点头像的话就会有一个方框出来，我们今天要做的就是这个效果。
我们首先来分析一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>延时提示框</title>
<style>
div{
float: left;
margin: 10px;
}
#div1{
width: 50px;
height: 50px;
background:#FF0000;
}
#div2{
width: 250px;
height: 250px;
background: #CCCCCC;
display: none;
}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv2.onmouseover = oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = 'block';
}
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = 'none';
}, 500);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
再来看一下我们的效果图。
延时提示框
接下来我们来分析知识点：
一、原来的方法
1.移入显示，移除隐藏
二、移除延时隐藏
1.移入下面的Div后，还是隐藏了
三、简化代码
1.合并两个相同的mouseover和mouseout
oDiv2.onmouseover = oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = 'block';
}
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = 'none';
}, 500);
好了，今天的学习就到这里了。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
小晴天.jpg
网友评论