延时提示框在很多网站和软件中都有使用,比如qq界面,将鼠标放到好友头像或者自己头像上会出现好友的名片,还有qq天气,移到上面就会出现天气详情。
具体效果请大家自己试验下哈!
延时提示框的实现原理中有两个主要的点:鼠标事件、延时触发 onmouseover、onmouseout,setTimeout
在此我要实现这样的功能:有两个div:红色div(显示) 蓝色div(隐藏) 。当鼠标移到红色div上的时候 蓝色div出现;从红色div上移走后,鼠标蓝色div过一秒才消失。但从红色div移到蓝色div上 蓝色div不消失;从两个div上都移走的时候 蓝色div延时消失。
下面将代码贴出:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="author" content="zsh">
<meta name="keywords" content="">
<meta name="description" content="">
<title>延时提示框</title>
<style type="text/css">
div{float:left; margin: 10px;}
#div1{width: 50px;height: 50px;background: red;}
#div2{width: 200px;height: 100px;background: blue; display: none;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
/**此函数功能:鼠标放到红色div上 蓝色div显示**/
oDiv1.onmouseover = function(){
clearTimeout(timer);
//清理 oDiv2.onmouseout中的timer
oDiv2.style.display = 'block' ;
}
/**此函数功能:鼠标放从红色div上移除 蓝色div消失**/
oDiv1.onmouseout = function(){
timer = setTimeout(function(){
oDiv2.style.display = 'none' ;
},1000);
//延时效果:1000毫秒后 才消失
}
/**此函数功能:蓝色div显示出来后,鼠标放到蓝色div上 蓝色div不消失**/
oDiv2.onmouseover = function(){
clearTimeout(timer);
}
/**此函数功能:蓝色div显示出来后,鼠标从蓝色div上移除 蓝色div消失**/
oDiv2.onmouseout = function(){
timer = setTimeout(function(){
oDiv2.style.display = 'none' ;
},1000);
}
}
</script>
</html>
以上js代码可作简化处理,合并函数:
<script type="text/javascript">
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' ;
},1000);
//延时效果:1000毫秒后 才消失
}
}
</script>