Day3-----delayPrompt

//------------------使用延时定时器完成提示框的延迟消失

<html>
<head><title>delayPrompt</title></head>
<style type="text/css">
#box{width: 500px;height: 500px;margin: 30px auto;background: pink;text-align: center;}
#prompt{width: 150px;height: 100px;margin: 10px;background: gray;float: left;visibility: hidden;}
#nav{float: left;width: 150px;height: 300px;background: #CC3;margin: 10px}
</style>
<script type="text/javascript">
window.onload=function(){
oPrompt=document.getElementById('prompt');
oNav=document.getElementById('nav');
var timer;
oNav.onmouseover=oPrompt.onmouseover=function(){
oPrompt.style.visibility="visible";
clearTimeout(timer);
}
oNav.onmouseout=oPrompt.onmouseout=function(){
timer=setTimeout(function(){oPrompt.style.visibility="hidden"},500);
}
}
</script>
<body>
<div id="box">
<div id="prompt">This is the delayPromptBox.</div>
<div id="nav">Show Box.</div>
</div>
</body>
</html>

posted on 2014-11-22 13:27  fleshy  阅读(122)  评论(0编辑  收藏  举报

导航