日期:2014-05-16  浏览次数:20445 次

初探js特效魅力之延时提示框07

初探js特效魅力之延时提示框07

 

 

<!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=utf-8" />
<title>无标题文档</title>
<style>
div{
 float:left;
 margin:10px;
}
#d1{
 width:50px;
 height:50px;
 background:red;
}
#d2{
 width:300px;
 height:150px;
 background:#CCC;
 display:none;
}
</style>
<script>
 window.onload=function(){
  var oDiv1=document.getElementById("d1");
  var oDiv2=document.getElementById("d2");
  var timer;
  oDiv2.onmouseover=oDiv1.onmouseover=function(){
   clearInterval(timer);
   oDiv2.style.display='block'; 
  }
  oDiv2.onmouseout=oDiv1.onmouseout=function(){
   timer=setTimeout(function(){
    oDiv2.style.display='none';     
   },500); 
  }

 }
</script>

</head>

<body>
 <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>


未完待续,请继续收看定时器two