setTimeout应用例子-移入移出div显示和隐藏

效果：移入div1，div2保持显示，移出div1，div2消失。

　　　移入div2，div2保持显示，移出div2，div2消失。

一、HTML代码

<div id='div1'></div>
<div id='div2'></div>

就g只有两个div模块，移入一个，显示另外一个。

二、CSS代码

给两个div抹上颜色，便于区别，在css里，我设置了float 属性，定义元素在左边方向浮动

 #div1{
     height:50px;
     background:grey;
     width:50px;
     float:left;border:1px
     }
 #div2{
     float:left;border:1px;
     height:50px;
     background:blue;
     width:50px;
     display:none;

     }

三JavaScript代码

 <script>
 window.onload=function(){
     var oDiv1 = document.getElementById('div1');
     var oDiv2 = document.getElementById('div2');
     var timer =null;
     oDiv1.onmouseover=oDiv2.onmouseover =  function(){
         clearTimeout(timer);        //通过setTimeout返回值得值，清除setTimeout
         oDiv2.style.display='block';

         };
     oDiv1.onmouseout = oDiv2.onmouseout =  function(){
          timer =  setTimeout(function(){   //此处赋值给timer，因为setTimeout本身会返回一个值。这个值是系统记录的一个setTimeout的ID，以后可以通过这个ID取消定时器

             oDiv2.style.display='none';    //设置1000毫秒后，div2模块消失
             },1000);

         }

     };

 </script>

四、效果演示